CSS 两列全高固定页脚？-6ren

CSS 两列全高固定页脚？

转载作者：行者123 更新时间：2023-11-28 13:44:47

我正在尝试创建一个包含 4 个 div 的布局；页眉、页脚和左右栏。

页眉应该在顶部，填满整个宽度，高度为 50 像素。页脚应固定在窗口底部，高度也为 50px。左右 div 应该相邻，并填满页眉底部和页脚顶部之间的所有空间(垂直)。

这看起来应该非常简单，但过去 5 个小时我都花在这上面，但无法让它正常工作。

我能做的最好的是:

<body>
  <div class="BodyWrapper">
    <div id="Header"></div><!-- End Header -->         
     <div class="Left LeftColumn">asds</div>
     <div class="Right RightColumn"></div>         
     <div class="push"></div>         
  </div><!-- End Body -->
  <div id="Footer"></div><!-- End Footer -->

CSS:

 *{
  padding:0px;
  margin:0px;
  }

  html, body {
  height:100%;
  font-family:verdana;
  font-size:11px;
  color:#646464;
  }

  .BodyWrapper {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 auto -50px;
  overflow:hidden;
  }

  #Footer, .push {
  height: 4em;
  }

  .Left {
  float:left;
  }

  .Right {
  float:right;
  }

  .LeftColumn {
     width:20%;
     height:100%;
     margin-bottom:-52px;
     border:1px solid gray;
     background:red;   
  }

  .RightColumn {
     width:70%;
     height:100%;
     margin-bottom:-52px;
     border:1px solid gray;
     background:green;
  }


  #Header {
  height:49px;
  background:blue;
  border-bottom:1px solid black;
  }

  #Footer {
  height:49px;
  background:blue;
  border-top:1px solid black;
  }

这样做的结果几乎是我想要的，但是左右栏一直延伸到页面底部并覆盖页脚。我真正想要的是给他们 100% 减去 50px 的高度。有什么建议么？或者一个有效的例子？

最佳答案

我知道，我知道 - table 是邪恶的。但他们在这里工作得很好!所有的高度和宽度问题都由表格本身的实现来解决。

<table>
<tr id="header">
<td>Header Stuff</td>
</tr>
<tr id="cols">
<td style="width:20%" id="leftcol">Left col Stuff</td>
<td style="width:80%" id="rightcol">Right Col Stuff</td>
</tr>
<tr id="footer">
<td>Copyright Whatever footer stuff</td>
</tr>
</table>

关于CSS 两列全高固定页脚？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5872640/