我有一个侧边栏，它只为它包含的内容占用足够的空间，而不是占用包含所有元素的 100% 的包装，下图应该明白我的意思:
这是我正在使用的一些代码:
HTML
<body>
<div id="wrapper">
<div id="top">
...
</div>
<div id="topnav">
<...
</div>
<div id="banner">
<img id="img" src="images/2for20.png" alt="banner1" />
</div>
<div id="subbanner">
...
</div>
<div id="content">
...
</div>
<div id="rightSide">
<p>This is the sidebar</p>
</div>
<div id="footer">
<p>© Copyright 2015 Celtic Ore, All Rights Reserved</p>
</div>
</div>
</body>
CSS
#wrapper
{
width:1000px;
height:100%;
margin:0px auto;
background-color:#efefef;
}
#rightSide
{
float:right;
position:relative;
width:220px;
height:100%;
background-color:#efefef;
}
#rightSide img
{
vertical-align:middle;
}
#rightSide h2
{
padding:10px 0px;
}
#rightSide p
{
padding:10px 0px;
}
#footer
{
width:100%;
padding: 10px 0px;
background-color:#000000;
float:left;
}
#footer p
{
color:white;
text-align:center;
}
最佳答案
这对我有用:
.container {
overflow: hidden;
....
}
#sidebar {
margin-bottom: -101%;
padding-bottom: 101%;
....
}
关于HTML - 侧边栏未填满 100% 的屏幕，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30649160/