Question

当我给出身高100％（它不起作用）时，我如何给div增加100％的高度然后我给身高100vh 然后 min-height 100vh < / strong>但它创造了额外的空间，div变得比需要的更大我也尝试max-height但不起作用。我想给任何小装置高度100％的元素。在此示例中，高度变得大于屏幕并进行滚动。我如何得到100％没有滚动而没有任何元素。

<!doctype html> <div class="header">asas </div> <div class="main"> </div> <div id="footer"> </div> <style> .header { width:100%; height:60px; background:#000; } .main { width:100%; min-height:100vh; background:#C00; } #footer {width:100%; height:100px; background:#0C3; } </style>

Answer 1

您可以使用calc()取消页眉和页脚的值：

body {margin:0}
.header {
  height: 60px;
  background: #000;
}
.main {
  min-height: calc(100vh - 160px);
  background: #C00;
}
#footer {
  height: 100px;
  background: #0C3;
}

<div class="header">asas
</div>

<div class="main">
</div>

<div id="footer">
</div>

Answer 2

你可以这样试试你必须给父母一个定义的高度，如果你使用％

它不起作用

＆＃13;

body{
  margin:0;
  height:100vh;
}
.header {
  width: 100%;
  height: 60px;
  background: #000;
}
.main {
  width: 100%;
  height: calc(100% - 160px); /* here you calculate the 100% minus the 60px of the header and 100px of the footer*/
  background: #C00;
}
#footer {
  width: 100%;
  height: 100px;
  background: #0C3;
}

＆＃13;

<body>
<div class="header">asas
</div>

<div class="main">
</div>

<div id="footer">
</div>
</body>

＆＃13;

Answer 3

如果您不需要Internet Explorer，则可以使用[\p{L}\p{N}]

flexbox

body {
  padding: 0;
  margin: 0;
}

.wrapper {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.main {
  flex: 1;
  background-color: cyan
}

.header {
  background-color: red;
  padding: 10px;
  text-align: center;
}

.footer {
  background-color: green;
  padding: 10px;
  text-align: center;
}

使100％的高度对任何设备都有响应

3 个答案: