100% 带有页眉和页脚的 Css 布局答案

【问题标题】：100% Css-layout with header and footer100% 带有页眉和页脚的 Css 布局
【发布时间】：2011-03-12 07:07:15
【问题描述】：

我正在尝试创建一个带有页眉和页脚（两者都有固定高度）的布局以及它们之间的 content-div 填充剩余空间。在 content-div 中，我希望 div 的高度基于百分比值（以 content-div 的 heihgt 作为父级）。我不知道该怎么做？

这是我想要完成的工作的示意图。

【问题讨论】：

标签： css layout height

【解决方案1】：

对于页脚粘在屏幕底部或内容底部（以离顶部较远者为准）的解决方案，请查看 Ryan Fait 的“粘性页脚”。它是一组轻量级且健壮的 CSS，通常是您想要的布局。

http://ryanfait.com/sticky-footer/

【讨论】：

【解决方案2】：

[See it in action]

  #header { 
    position:absolute; 
    height: 50px; 
    left:0; 
    top:0; 
    width:100%; 
    background:green;
  }

  #footer { 
    position:absolute; 
    height: 50px; 
    left:0; 
    bottom:0; 
    width:100%;
    background:green;
  }

  #content { 
    position: absolute; 
    top:50px; 
    bottom:50px; 
    left:0;
    width:100%;
    background:#eee; 
  }

  #box1 { 
    height:50%; 
    width:30%; 
    float:left; 
    background:red; 
  }

【讨论】：

谢谢！我忘了提到我想将框绝对放置在 content-div 中，但是将它们设置为“位置：绝对；”完全没有问题
此解决方案的一个问题：当内容向下推过视口底部时，向下滚动会使页脚悬在内容顶部...：/
@aaaidan 只需将overflow css 属性添加到#content。查看实际操作：jsbin.com/erawu3/63

【解决方案3】：

.header {
  position: absolute;
  height: 50px;
  left: 0;
  top: 0;
  right: 0;
}

.footer {
  position: absolute;
  height: 50px;
  left: 0;
  bottom: 0;
  right: 0;
}

.content {
  position: absolute
  top: 50px;
  left: 0px;
  right: 0px;
  bottom: 50px;
}

.box1 {
  width: 30%;
  height: 50%;
}

【讨论】：

你的意思是说使用类更好？
@aaaidan：对于大多数事情，我更喜欢类，因为我不喜欢用可能并不总是唯一的 ID 来填充页面。再说一次，我使用 jQuery，这使得它们与 ID 一样易于引用，而无需担心。也就是说，我确实会在我认为有必要的地方使用 ID，因为有时您需要额外的 selector weight。
我完全同意你的看法。只是想听你说... :)