2016-05-05 5 views
2

2つのdivを並行して追加し、完全な高さを与えるのに問題があります。並列列のdivをブートストラップと一緒に追加/

私は既にdivを並列に持っていますが、問題は完全にそれらに与えたいときです。height:100%;何も起こりません。

これを可能にするためには、どのプロパティを変更する必要がありますか?まず https://jsfiddle.net/davidlerma87/3u8v01b4/2/

まあ

アイデアは、この私のコードです

を分け、X-スクロールバーとy-スクロールバーなしで、唯一のカバー写真を表紙ページを持つことです:ご覧のとおり、実際にはうまく機能していないメニューバーが表示されています。

第二:フルハイトと私は2つのParallelsの列の下にしたい

サード:これも携帯用です。

問題は、整列していないdivの位置です。 感謝します!

see screenshot here

ここでも簡単に説明、2列に分かれ 画面が、トップメニュー

+1

両方のリンクがスクリーンショットにつながります...また、jsfiddle –

+0

@MichalHainc ready!答えのための –

答えて

0

このフィドルをご確認ください私はCSSで必要な変更を加えました

html,body { height:100%; } 
body { 
    background: url("img/GProxpt.jpg") no-repeat center center fixed;; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    padding:0; 
    margin:0; 
    color:#f1f3f5; 
    font-family: "Courier New"; 
    font-size:14px; 
} 

.container-fluid { 
     background-color: rgba(0, 0, 0, 0.6); 
    /* position: absolute; */ 
    /* top: 0; */ 
    /* left: 0; */ 
    /* width: 100%; */ 
    height: 100%; 
    /* overflow: auto; */ 
} 

.icon-menu {  
    margin-top:20px; 
    margin-right:7em; 
    float:right; 
    cursor:pointer; 
    width:30px; 
    height:40px; 
} 

.icon-menu:hover { 
    width:35px; 
    height:45px; 
} 

.row-menu { background:red;  min-height: 100%;} 

.left-side { 
    width:100%; 
    height:100%; 
    padding-left:20px; 
    margin-top:7em; 
} 

.left-side .title { 
    color:#DCEA5F; 
    font-size:50px; 
} 

.left-side .title .sub-title { 
    font-size:35px; 
} 
.left-side .text-par { 
    padding-top:20px; 
    padding-right:0; 
    font-size:20px; 
} 

.cols { 
     /* position: absolute; */ 
    display: block; 
    min-height: 100vh; 
    margin-top: 20px; 
    float: left; 
} 

.outer-right-side { 
    position:relative; 
    background:#18232E; 
    margin-right:0; 
    margin-top:0; 
} 

.outer-left-side { 
    margin-bottom:0; 
    position:relative; 
    background:white; 
} 

https://jsfiddle.net/3u8v01b4/5/

更新フィドル:https://jsfiddle.net/51wwmvqx/ は巻物を削除し、HTML構造の変更を行いました。

+0

あなたは男ですが、うまくいきません...私は追加されたスクリーンショットを修正しました。あなたが望めば、もう一度見てみることができます。よろしく! –

+0

スクリーンショットごとに修正されました。フィドルチェックhttps://jsfiddle.net/51wwmvqx/2/show/ –

0

を含む完全な高さであなたはこれを試すことができます。

.cols { 
    height: 100vh; 
} 
+0

おかげで、divが展開されますが、オーバーフロースクロールバーがあり、あなたが体にこのCSS適用することができます私は、スクロールを除去するために、それは –

+0

これはあなたのために参考になるbのかもしれたい いけない: 体を{ オーバーフロー:非表示。 } –

+0

スクリーンショットを変更しました。 –

関連する問題