我正在构建三个div div网站，并且不能让div为整个页面着色。它只覆盖了窗口以及卷轴搞砸之后的所有内容。
正如您在此处所见http://imgur.com/T5lOuy6 如何在滚动后保持列形状？ 这是我的代码
* {
margin: 0;
padding: 0;
}
.container {} .right {
float: right;
width: 20%;
background-color: Beige;
height: 100vh;
}
.left {
float: left;
width: 20%;
background-color: Beige;
height: 100vh;
}
.middle {
margin: 0 100px;
background-color: Cornsilk;
height: 100vh;
}
.menu ul {
list-style-type: none;
display: inline;
text-align: center;
}
.menu ul li {
display: inline;
width: 15%;
float: left;
}
.contact {
margin-left: 25px;
}
img.alignright {
float: right;
margin-left: 10px;
margin-top: 10px;
margin-bottom: 10px;
margin-right: 10px;
}
img.alignleft {
float: left;
margin-left: 10px;
margin-top: 10px;
margin-bottom: 10px;
margin-right: 10px;
}
hr {
height: 10px;
color: Beige;
background-color: Beige;
border: none;
}<body>
<a name="top"></a>
<div class=container>
<div class=right>
col3
</div>
<div class=left>
col1
</div>
<div class=middle>
<div class=header>
<header>
<h1><center>At the Gallerys</center></h1>
</header>
<br>
<center><font size=5px><b> Virtual Collection</b></font>
</center>
<br>
<hr>
<br>
<center><font size=4px>Current Selections</font>
</center>
<br>
</div>
<div class=menu>
<ul>
<li><a href="#img1">Milk</a>
</li>
<li><a href="#img2">Eggs</a>
</li>
<li><a href="#img3">Cheese</a>
</li>
<li><a href="#img4">Vegetas</a>
</li>
</ul>
<br>
<br>
<hr>
</div>
<div class=gallery>
<img src="1.png" class="alignleft" />
<a name="img1"></a>
<p align="left">
Artist</br>
Title</br>
year</br>
type</br>
size</br>
collection</br>
</p>
<br>
<br>
<br>
<hr>
<img src="1.png" class="alignright" />
<a name="img2"></a>
<p align="right">
Artist</br>
Title</br>
year</br>
type</br>
size</br>
collection</br>
</p>
<br>
<br>
<br>
<hr>
<img src="1.png" class="alignleft" />
<a name="img3"></a>
<p align="left">
Artist</br>
Title</br>
year</br>
type</br>
size</br>
collection</br>
</p>
<br>
<br>
<br>
<hr>
<img src="1.png" class="alignright" />
<a name="img4"></a>
<p align="right">
Artist</br>
Title</br>
year</br>
type</br>
size</br>
collection</br>
</p>
<br>
<br>
<br>
<hr>
</div>
<div class=contact>
<p align="left">
Please feel free to contact our curator at
<br>123 Main Street
<br>Toronto,Ontario
<br>M1A 2B3
<br>
<br>You can also reach us by
<br>Email:
<br>Telephone:416-555-6789
<br>
</p>
</div>
</div>
</div>
答案 0 :(得分：3)
因为height:100vh;是视口的高度，在这种情况下是视窗的高度。如果您希望您的商品展开整个页面，请将其设为height:100%;，只要父元素展开页面（是容器），它就会生效。请注意，您需要定义容器的高度，以便子元素知道它们需要的高度：
注意：我在此示例中更改了项目的结构。基本上你想要将每个元素堆叠到另一个元素的左边，所以右边的元素将是DOM中的最后一个元素。
* {
margin: 0;
padding: 0;
}
.container {
height: 1045px;
}
.right {
float: left;
width: 20%;
background-color: Beige;
height: 100%;
}
.left {
float: left;
width: 20%;
background-color: Beige;
height: 100%;
}
.middle {
float: left;
width: 60%;
background-color: Cornsilk;
height: 100%;
}
.menu ul {
list-style-type: none;
display: inline;
text-align: center;
}
.menu ul li {
display: inline;
width: 15%;
float: left;
}
.contact {
margin-left: 25px;
}
img.alignright {
float: right;
margin-left: 10px;
margin-top: 10px;
margin-bottom: 10px;
margin-right: 10px;
}
img.alignleft {
float: left;
margin-left: 10px;
margin-top: 10px;
margin-bottom: 10px;
margin-right: 10px;
}
hr {
height: 10px;
color: Beige;
background-color: Beige;
border: none;
}<body>
<a name="top"></a>
<div class=container>
<div class=left>
col1
</div>
<div class=middle>
<div class=header>
<header>
<h1><center>At the Gallerys</center></h1>
</header>
<br>
<center><font size=5px><b> Virtual Collection</b></font>
</center>
<br>
<hr>
<br>
<center><font size=4px>Current Selections</font>
</center>
<br>
</div>
<div class=menu>
<ul>
<li><a href="#img1">Milk</a>
</li>
<li><a href="#img2">Eggs</a>
</li>
<li><a href="#img3">Cheese</a>
</li>
<li><a href="#img4">Vegetas</a>
</li>
</ul>
<br>
<br>
<hr>
</div>
<div class=gallery>
<img src="1.png" class="alignleft" />
<a name="img1"></a>
<p align="left">
Artist</br>
Title</br>
year</br>
type</br>
size</br>
collection</br>
</p>
<br>
<br>
<br>
<hr>
<img src="1.png" class="alignright" />
<a name="img2"></a>
<p align="right">
Artist</br>
Title</br>
year</br>
type</br>
size</br>
collection</br>
</p>
<br>
<br>
<br>
<hr>
<img src="1.png" class="alignleft" />
<a name="img3"></a>
<p align="left">
Artist</br>
Title</br>
year</br>
type</br>
size</br>
collection</br>
</p>
<br>
<br>
<br>
<hr>
<img src="1.png" class="alignright" />
<a name="img4"></a>
<p align="right">
Artist</br>
Title</br>
year</br>
type</br>
size</br>
collection</br>
</p>
<br>
<br>
<br>
<hr>
</div>
<div class=contact>
<p align="left">
Please feel free to contact our curator at
<br>123 Main Street
<br>Toronto,Ontario
<br>M1A 2B3
<br>
<br>You can also reach us by
<br>Email:
<br>Telephone:416-555-6789
<br>
</p>
</div>
</div>
<div class=right>
col3
</div>
</div>
如果您不想定义容器的高度，那么您需要知道最大元素的高度（本例middle）并使用JavaScript设置元素的高度与该元素相同。
window.onload = function(){
document.getElementByClassName("left")[0].height = document.getElementByClassName("middle")[0].height;
document.getElementByClassName("right")[0].height = document.getElementByClassName("middle")[0].height;
...
}