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

Posted 2023-03-06

【中文标题】100% 带有页眉和页脚的 Css 布局

【英文标题】：100% Css-layout with header and footer

【发布时间】：2011-03-12 07:07:15

【问题描述】：

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

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

【参考方案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。

我完全同意你的看法。只是想听你说... :)