添加元素时向正文添加垂直滚动以占据剩余空间

有两个 div。我希望第二个 div 占据剩余空间。目前它占据了 100% 的高度,但它应该只占据剩余空间。


html, body {

  height: 100%;

  width: 100%;

}


.header {

  background-color: blue;

  color: red;

  font-size: 50px;

}


.content {

  background-color: red;

  height: 100%;

  width: 100%;

}

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width">

  <title>JS Bin</title>

</head>

<body>

<div class="header">Header</div>

<div class="content">

  </div>

</body>

</html>


杨魅力
浏览 31回答 1
1回答

鸿蒙传说

发生这种情况是因为你将 body 设置为 100%你可以尝试另一种方法&nbsp; body {&nbsp; &nbsp; height: 100%;&nbsp; &nbsp; width: 100%;&nbsp; &nbsp; display:grid;&nbsp; &nbsp; grid-template-columns:1fr;&nbsp; &nbsp; grid-template-rows:70px 1fr;&nbsp; }并且不要设置任何一个元素的高度
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

Html5