我搜索了很多解决方案来解决我的问题，但没有一个对我有用。 html 和正文不会拉伸(stretch)以适应其内容。 body 高度似乎是970px。我有这段代码:
HTML:
<html> <head></head> <body onLoad='init()'> <div id='content'> <table class='pagecontent'> <tr><td id='content'> some content </td> <td id='side'> some other content </td> </tr> </table> </div> <div id='footer'> <span class='copy'>© 2014</span> </div> </body> </html>
CSS:
html, body {
width:1000px;
}
html {
display: table;
margin: auto; }
body{
display: table-cell; }
#content{
position:relative;
top: 468px;
height:auto;
min-height: 200px;
width:1000px;
} table.pagecontent{
border-spacing: 0px;
width:1000px;
height:1px;
padding-bottom: 60px;
td#side{
width:300px;
border: 1px solid black;
border-left:20px solid black;
margin-top: 0px;
vertical-align: top;
height:100%;
}
td#content{
width:650px;
}
#footer{
position:relative;
bottom:0px;
width:1000px;
height:80px;
background:url('../images/footer-back.png') no-repeat;
}
谢谢!
最佳答案
- 首先，永远不要多次使用同一个 ID。在您的代码中，“#content”被声明了两次。
- 不要设置 HTML 和 body 标签的宽度，最好在 body 内部使用一些带有类的 div 并设置其宽度。
- 如果规范没有要求，请勿使用表格进行页面布局。
您的代码的原始版本将类似于 example .
标记:
<div id="layout">
<div class="pagecontent">
<div id="content">some content</div>
<div id="side">some other content</div>
</div>
</div>
<div id="footer">
<span class="copy">© 2014</span>
</div>
样式:
.pagecontent {
margin-right: auto;
margin-left: auto;
width: 1000px;
}
#side {
float: left;
width: 350px;
}
#content {
float: left;
width: 650px;
}
#footer {
margin-right: auto;
margin-left: auto;
width: 1000px;
height: 80px;
background: url('../images/footer-back.png') no-repeat;
}
希望对你有所帮助。
关于html - body 不会拉伸(stretch)以适应它的内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25269567/