Question

如果您的html文档如下：

<body>
  <div id="top"></div>
  <div id="rest"></div>
</body>

并且我给“top”div一个40px的高度，有没有办法给css中身体其余高度“休息”div。我知道在这样的Javascript中可以使用

function derest(){
var bodyheight = window.getComputedStyle(document.getElementsByTagName('body')[0], null).height;

bodyheight = bodyheight.substring(0, bodyheight.length - 2);

var topheight = window.getComputedStyle(document.getElementById('top'), null).height;

topheight = topheight.substring(0, topheight.length - 2);

restheight = bodyheight - topheight;

document.getElementById("rest").style.height = restheight;

}

但这需要花费很多时间，那么有更好的方法吗？

Answer 1

你可以使用纯CSS

#top{
  height:40px;
  background:green;
}
#rest{
  height:calc(100% - 40px);
  background:red;
}
body,html{
  height:100%;
  margin:0;
  padding:0;
}

Answer 2

您可以使用flex来#rest拉伸以填充高度：

＆＃13;

html {
  height: 100%;
  margin:0;
  padding:0;
}
body {
  height: 100%;
  margin:0;
  padding:0;
  display: flex;
  flex-direction: column
}
#top {
  height: 40px;
  background: red;
}
#rest {
  flex: 1 1 auto;
  background: blue;
}

＆＃13;

<div id="top"></div>
<div id="rest"></div>

＆＃13;

Answer 3

如果容器为display: flex，那么您可以设置要增长的元素（使用flex-grow）以填充剩余空间。

＆＃13;

html,
body {
  min-height: 100vh;
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  flex-direction: column;
}

header {
  background-color: #aaf;
}

main {
  background-color: #afa;
  flex: 1 0 auto;
}

footer {
  background-color: #faa;
}

＆＃13;

<header>
  Header
</header>
<main>
  Main
</main>
<footer>
  Footer
</footer>

＆＃13;

Answer 4

您可以使用：

#top {
 position: fixed;
 left: 0px;
 top: 0px;
 width: 100%;
 height: 40px;
}

#rest {
 position: fixed;
 top: 40px;
 left: 0px;
 width: 100%;
 height: calc(100% - 40px);
}

甚至使用padding-top 40px而不是修复#rest div

https://jsfiddle.net/lonking/L5mwd6r5/

有css身高：休息属性吗？

4 个答案: