让div占据100％的身高，减去固定高度的页眉和页脚

小编典典

让div占据100％的身高，减去固定高度的页眉和页脚

css

从我的研究来看，这似乎是一个绝对经典的CSS问题，但我找不到确切的答案-所以是StackOverflow。

如何将内容div设置为占主体高度的100％，减去固定高度的页眉和页脚所占的高度？

<body>
  <header>title etc</header>
  <div id="content">body content</div>
  <footer>copyright etc</footer>
</body>

//CSS
html, body { 
  height: 100%;
}
header { 
  height: 50px;
}
footer { 
  height: 50px;
}
#content { 
  height: 100% of the body height, minus header & footer
}

我想使用纯CSS，并且答案在所有浏览器中都是防弹的。

阅读 769

2020-05-16

共1个答案

小编典典

这个版本将在所有最新的浏览器工作，IE8，如果你有Modernizr的脚本（如果不只是改变header和footer成divS）：

html,

body {

  min-height: 100%;

  padding: 0;

  margin: 0;

}



#wrapper {

  padding: 50px 0;

  position: absolute;

  top: 0;

  bottom: 0;

  left: 0;

  right: 0;

}



#content {

  min-height: 100%;

  background-color: green;

}



header {

  margin-top: -50px;

  height: 50px;

  background-color: red;

}



footer {

  margin-bottom: -50px;

  height: 50px;

  background-color: red;

}



p {

  margin: 0;

  padding: 0 0 1em 0;

}


<div id="wrapper">

  <header>dfs</header>

  <div id="content">

  </div>

  <footer>sdf</footer>

</div>

2020-05-16