CSSを使用してブラウザに合わせてdivの高さを設定する

コンテナのdiv内に2つのDIVがありますが、下のようなブラウザウィンドウに合わせて設定する必要がありますが、私の解決策CSSを使用してブラウザに合わせてdivの高さを設定する

enter image description here

マイスタイルシートのコード

html, body { 
       width: 100%; 
       height: 100%; 
       margin: 0; 
       padding: 0; 

      } 

.container { 
    height: auto; 
    width: 100%; 
} 
.div1 { 
    float: left; 
    height: 100%; 

    width: 25%; 
} 
.div2 { 
    float: left; 
    height: 100%; 
    width: 75%; 
}

ボディ

<body> 
<div class="container"> 
    <div class="div1"></div> 
    <div class="div2"></div> 
</div>

出典

2013-09-21 Dilukshan Mahendra

[例]（http://jsbin.com/aNICAva/1/edit） – Vucko

両方に100％の高さが必要な場合は、 '.container'に' height：100％ 'を設定してください。 – Harry

オフトピック：あなたはそのスケッチを作成するために何を使用しましたか？ – Victor

- &のjQueryを位置決め静的とFIDDLE

.div1 { 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    width: 25%; 
} 
.div2 { 
    position: absolute; 
    top: 0; 
    left: 25%; 
    bottom: 0; 
    width: 75%; 
}

2溶液（また、相対使用することができる） - FIDDLE

を

.div1 { 
    float: left; 
    width: 25%; 
} 
.div2 { 
    float: left; 
    width: 75%; 
} 

$(function(){ 
    $('.div1, .div2').css({ height: $(window).innerHeight() }); 
    $(window).resize(function(){ 
    $('.div1, .div2').css({ height: $(window).innerHeight() }); 
    }); 
});

出典

2013-09-21 15:11:24 mdesdev

これはうまくいきますか？ありがとうmdesdev –

よろしくお願いします;） – mdesdev

男、身長を試してみてください。

空のdiv絶対位置と

第1溶液をするためのウィンドウの完全な高さ設定

.div1 { 
    float: left; 
    height: 100%; 
    min-height: 100%; 
    width: 25%; 
} 
.div2 { 
    float: left; 
    height: 100%; 
    min-height: 100%; 
    width: 75%; 
}

出典

2013-09-21 15:08:47

男、簡単でした。 – sotix

今は試してみましたが、うまくいきませんでした。（ –

空のdivでそのコードを使うことはできません。 – mdesdev

あなたは次のように、一緒に要素をDIV1するために、HTMLの高さを宣言する必要があります。

html, 
body, 
.container, 
.div1, 
.div2 { 
    height:100%; 
}

デモ：http://jsfiddle.net/Ccham/

出典

2013-09-21 15:14:04

あなたはできません。 – user1191559

古い学校のIEを気にしない場合にもviewport percentagesを使用することができます。

height: 100vh;

出典

2014-06-26 04:40:44 Dsmart

私はあなたが浮く必要はないと思います。

html, 
 
body, 
 
.container { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
.div1, .div2 { 
 
    display: inline-block; 
 
    margin: 0; 
 
    min-height: 100%; 
 
} 
 

 
.div1 { 
 
    width: 25%; 
 
    background-color: green; 
 
} 
 

 
.div2 { 
 
    width: 75%; 
 
    background-color: blue; 
 
}

<div class="container"> 
 
    <div class="div1"></div><!-- 
 
    --><div class="div2"></div> 
 
</div>

display: inline-block;あなたが+ 25％75％を持っているので、HTMLで

コメントは、=使用されている（ちょうどスパンのようしかし、ブロック効果を維持する）インラインとしてブロックを表示するために使用されます100％。 div-countの間のスペースは、75％+ 1％+ 25％= 101％（改行を意味します）

出典

2016-01-19 10:31:24 Dionys

CSSを使用してブラウザに合わせてdivの高さを設定する

答えて

関連する問題