2

我在页面布局方面遇到问题。我不得不混合使用表格和 div。问题出现在页脚和包含表格的 div 上。页脚显示在该 div 上方，但在 html 中，它是我在“main_container”中的最后一个元素。

<style>
 #sidebar {
            position: relative;
            display: block;
            float: left;
            width: 30%;
          }
 #TblContain {
               position: relative;
               display: block;
               float: right;
               width: 70%;
             }

 #footer {
           position: relative;
           width: 100%;
           display: block;
         }
</style>
<div id="main_container">
<div id="head">
</div>

<div id="nav_bar">
</div>

<div id="content">
<div id="sidebar">
</div>
<div id="TblContain">
 <table></table>
</div><!--endTblContain-->
</div><!--endContent-->

<div id="footer">
</div><!--endFooter-->
</div><!--endMainContain-->
4

3 回答 3

4

如果清楚：左；不起作用，尝试添加 clear:both; 到css的页脚。

于 2011-06-22T18:36:21.460 回答
1

这比尝试浮动 div 要容易得多。此外，它将允许您的页面可调整大小并且您的个人内容区域可滚动。

<html>
  <body style="overflow:hidden;">
     <div id="header" style="overflow:hidden; position:absolute; top:0; left:0; height:50px;right:0px;background-color:#FF0000;"></div>
     <div id="leftNav" style="overflow:auto; position:absolute; top:50px; left:0px; right:200px; bottom:50px;background-color:#00FF00;"></div>
     <div id="mainContent" style="overflow:auto; position:absolute; top:50px; left: 200px; right:0px; bottom:50px;background-color:#0000FF;"></div>
     <div id="footer" style="overflow:hidden; position:absolute; bottom:0; left:0; height:50px;right:0px;background-color:#FFFF00;"></div>
  </body>
</html>

http://jsbin.com/ugoli3/2/edit

于 2011-06-22T18:47:48.140 回答
0

尝试添加：

clear: left;

到页脚。

于 2011-06-22T18:31:58.730 回答