左の div
と右の div
の2つのカラムを持つレイアウトがあります。
右側のdiv
にはグレーのbackground-color
があり、ユーザーのブラウザウィンドウの高さに応じて垂直方向に拡大する必要があります。今のところ、background-color
はdiv
内の最後のコンテンツで終わっています。
私はheight:100%
やmin-height:100%;
などを試してみました。
というような、いくつかの重要な内容に触れていません。
1つの可能性があります。
。body,
div {
margin: 0;
border: 0 none;
padding: 0;
}
html,
body,
#wrapper,
#left,
#right {
height: 100%;
min-height: 100%;
}
#wrapper {
margin: 0 auto;
overflow: hidden;
width: 960px; // width optional
}
#left {
background: yellow;
float: left;
width: 360px; // width optional but recommended
}
#right {
background: grey;
margin-left: 360px; // must agree with previous width
}
<html>
<head>
<title>Example</title>
</head>
<body>
<div id="wrapper">
<div id="left">
Left
</div>
<div id="right"></div>
</div>
</body>
</html>
どの列を固定するか、どの列をリキッドにするかによって、この方法には多くのバリエーションがあります。絶対配置でもできますが、一般的にはfloatを使った方が良い結果が得られます(特にクロスブラウザの観点から)。
min-height: 100%`を追加して、高さを指定しない(または自動にする)。私の場合はこれで完全に解決しました。
.container{
margin: auto;
background-color: #909090;
width: 60%;
padding: none;
min-height: 100%;
}