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％的高度 - 它不尊重它的父级出现高度和滚动条（在IE10中查看以上小提琴）。

所以现在我想，是的，现在是时候尝试使用flexbox，因为它们现在得到普遍支持。这是我的小提琴：

<header>Header</header>

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

<footer>Footer</footer>

http://jsfiddle.net/waLwfthb/

使用正确的前缀即使在IE中也能正常工作。但是在Chrome中，我无法填充整个Flex容器。

我不想做任何嵌套的flexes或任何比这更复杂的东西，我只想要这个基本的布局，所以我可以开始在内容类中工作，好像它是我的整个页面而忘记了页眉和页脚。在这个时代，这仍然很难吗？我可能会遗漏一些非常简单的东西，希望有人能够提供帮助。我认为这是一个非常普遍的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中的最后一个小提琴： 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>

一个小解释： 由于我必须在内容中使用相对/绝对定位，因此它会超越其他所有内容。这并不理想，因为在您的标题中，您可能会有落后内容的下拉菜单。我也试图避免显式的z索引，所以我在html中以相反的顺序放置这些块并使用flex-direction：column-reverse;这使css / html稍微复杂化，从一般示例中进一步移动它，但如果是一个真实案例场景则更多。

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

希望将来可以帮助某人。

Answer 3

试试这个...... 我取了窗口高度的值，并使javascript更改了内容的值，这将页眉和页脚分开，你仍然可以定期使用它。

希望这有帮助！

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>

动态标题，内容和页脚的经典布局

3 个答案: