Question

我搜索了很多问题解决了我的问题，但没有一个能为我工作。 html和正文不会伸展以适应它的内容。身高似乎是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'>&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;
}

谢谢！

Answer 1

首先，不要多次使用相同的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">&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;
}

希望它会对你有所帮助。

身体不伸展以适应它的内容

1 个答案: