Question

我有以下内容：

＆＃13;

body {
  overflow-x: hidden;
  overflow: hidden;
  height: 100%;
  min-height: 100%;
}

html {
  height: 100%;
  min-height: 100%;
}

.navbar-header {
  background: green;
}

.sidebar {
  background-color: #333;
  border-right: 1px solid #000;
  color: #fff;
  position: fixed;
  width: 178px;
  height: 100%;
}

.content {
  border: 1px solid #ddd;
  height: calc(100% - 150px);
  background-color: #ffffff;
  overflow: scroll;
  overflow-x: hidden;
  margin-left: 178px;
}

.footer {
  border: 1px solid #ddd;
  min-height: 78px;
  margin-top: 10px;
  padding: 20px;
  background-color: #f6f9fb;
  position: fixed;
  bottom: 0;
  width: calc(100% - 178px);
  left: 185px;
}

＆＃13;

<div class="navbar-header">
  header
</div>
<nav class="sidebar">
  sidebar
</nav>

<div class="content">
  content
</div>


<div class="footer">

  footer
</div>

＆＃13;

但是在我calc工作的项目中，我根据%更改vh以使其正常工作，很抱歉我无法提供我的本地代码，但我我想了解为什么我的代码只使用vh代替%。

height: calc(100vh - 150px);
height: -moz-calc(100vh - 150px);
height: -webkit-calc(100vh - 150px);

Answer 1

高度的百分比值（也在calc）仅在父元素具有固定高度时，或者所有父母，祖父母等直至身体（或具有固定px的祖先）时才有效width）具有百分比高度（即没有auto高度）。

Answer 2

vh是视口高度，即元素呈现的区域。将元素设置为100vh基本上是告诉他们占据视口的整个高度。

另一方面，使用%告诉您的元素使用他们需要的所有空间。如果您的div为空，那么您的视口将为空。

CSS calc与vh一起使用但不是％

2 个答案: