我的 #main div 没有 height 或 width 尽管其中有内容。我希望 #main div 填充 header 和 footer 之间的 100% 空间，以便显示整个页面中 #main 的 background-image(减去 header 和 footer)。我无法让 #main 动态填充整个空间(它应该在调整浏览器窗口大小时调整大小)...我该怎么做？
HTML:
<body>
<div id="page">
<header id="header">
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
<li><a href="#">Item 5</a></li>
</ul>
</header>
<content id="main">
<h1>Body</h1>
<p>Text...</p>
</content>
<footer id="footer">
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
</ul>
</footer>
</div>
</body>
CSS:
#page {
min-height: 100%;
height: 100%;
position: relative;
}
#main {
padding-bottom: 50px;
background: url('Background.jpg');
}
#header {
text-align: center;
background: #595959;
font-size: 30px;
line-height: 60px;
}
#header ul li {
display: inline-block;
height: 60px;
width: 19%;
}
#header ul li:hover, #footer ul li:hover {
background: #696969;
}
#header ul li a, #footer ul li a {
display: block;
text-decoration: none;
color: #BFBFBF;
}
#footer {
position: absolute;
height: 50px;
width: 100%;
bottom: 0;
text-align: center;
background: #595959;
font-size: 25px;
line-height: 50px;
}
#footer ul li {
display: inline-block;
height: 50px;
width: 15%;
}
#footer img {
margin-right: 10px;
}
最佳答案
<content id="main"> is not a valid HTML tag , 虽然you can define it as a block-level element via CSS anyway .
我建议你改成阅读
<div id="main">
...
</div>
关于css - 内部 div 具有 0x0 大小，即使它有内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19605650/