动态页眉、内容和页脚的经典布局

Question

我知道这个问题已经被问过一千次了，我已经研究了一段时间了。

基本上，我有一个高度未知的页眉和页脚，我需要内容来填充剩下的内容。我需要能够在内容中做我想做的事。

<header>Header</header>

<div class="content">
    <div class="table-cell">
        <div class="something">Something</div>
    </div>
</div>

<footer>Footer</footer>

http://jsfiddle.net/a3nvjqvg/

我以前用 display: table-row 来做这件事，一切都很好，但现在我需要支持 IE10，在 IE10 中，我无法制作一个 div 内部内容，它有 100 % height - 它不尊重它的父高度并且出现滚动条（在 IE10 中检查 fiddle）。

所以现在我想，好吧，是时候尝试 flexboxes 了，因为它们现在得到了普遍支持。这是我的 fiddle:

<header>Header</header>

<div class="content">
    <div class="something">Something</div>
</div>

<footer>Footer</footer>

http://jsfiddle.net/waLwfthb/

使用适当的前缀，即使在 IE 中也能正常工作。但是在 Chrome 中我无法填满整个弹性容器。

我不想做任何嵌套的 flexes 或比这更复杂的事情，我只想要这个基本布局，这样我就可以开始在内容内部工作 class，就好像它是我的整个页面一样，忘记了页眉和页脚。在这个时代还那么难吗？我可能会遗漏一些非常简单的东西，希望有人能提供帮助。我认为这是 flex 的广泛使用，但似乎大多数问题和答案都是关于更具体的情况。

Answer 1

您只需要从子 div 中删除 height: 100% 并将 display: flex 添加到容器中。

这在 Chrome 对我有用：

html {
    height: 100%;
}
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

header {
    background: green;
}

.content {
    flex: 1;
    background: pink;
    display: flex;
}

.something {
    background: yellow;
    width: 100%;
}

footer {
    background: cornflowerblue;
}

<header>Header</header>
    
<div class="content">
  <div class="something">Something</div>
</div>

<footer>Footer</footer>

Answer 2

万一以后有人偶然发现这个问题，这里是你可以做的（愚蠢的我没有早点想到它，我想我的脑子都在沸腾）

您需要使用绝对定位。这是在 IE10、FF、Chrome、Opera 和 Safari 中工作的最终 fiddle： http://jsfiddle.net/waLwfthb/5/

html {
    height: 100%;  
}

body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    display: -ms-flexbox;
    display: -webkit-flex;
    flex-direction: column-reverse;
    -ms-flex-direction: column-reverse;
    -webkit-flex-direction: column-reverse;
}

header {
    background: green;
    position: relative;
}

header:hover {
    
}

header:hover::after {
    position: absolute;
    top: 100%;
    left: 20px;
    background: white;
    content: 'I am a dropdown menu';
    display: inline-block;
}

.content {
    flex: 1;
    -ms-flex: 1;
    -webkit-flex: 1;
    position: relative;
    background: pink;
}

.something {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: yellow;
}

footer {
    background: cornflowerblue;
}

<footer>Footer</footer>

<div class="content">
    <div class="something">Something</div>
</div>

<header>I'm a menu, hover you mouse</header>

一点解释： 因为我必须在内容中使用 relative/absolute 定位，所以它高于一切。这并不理想，因为在您的 header 中，您的下拉菜单可能会隐藏在内容后面。我也尽量避免显式 z-indexes，所以我将这些块以相反的顺序放在 html 中并使用 flex-direction: column-reverse;这使 css/html 稍微复杂了一点，使其与一般示例相去甚远，但如果是真实案例场景则更复杂。

作为奖励，这里有一个带有导航窗格、内容和侧边栏的 jsfiddle： http://jsfiddle.net/waLwfthb/6/

希望这对以后的人有所帮助。

Answer 3

试试这个... 我取了windows高度的值，javascript改变了content的值，将页眉和页脚分开，你仍然可以正常使用它。

希望对您有所帮助！

document.onreadystatechange = function()
{
      if(document.readyState == "complete")
      {
          var  myw = window.innerWidth;
          var  myh = window.innerHeight;
          
          document.getElementById("content").style.width  = "auto";
          document.getElementById("content").style.height = window.innerHeight+"px";
        
          //alert("done");
      }
}

*
{
  margin:0;
  padding:0;
  border:0;
  text-align:center;
  font-family: verdana;
}

ul
{
  list-style-type: none;
}

a:link{text-decoration:none; color:#44f;}
a:link:hover{text-decoration:none; color:#aaf;}

#content
{
  position:relative;
}
  
li
{
   display:inline;
}

<!DOCTYPE html>
<html>
<head>
 <title></title>
</head>
<body>
  <div id="container">
    <header>
      <h1>Welcome</h1>
      <nav>
        <ul>
          <li><a href="#">one</a></li>
          <li><a href="#">two</a></li>
          <li><a href="#">three</a></li>
        </ul>
      </nav>
    </header>
    
    <div id="content">
    </div>
    
    <div id="footer">
      All Rights Reserved.
    </div>
    
  </div>
</body>
</html>

动态页眉、内容和页脚的经典布局

Classic layout of dynamic header, content and footer

html

css

layout

flexbox