Question

我需要创建一个使用100vh的网页，或占用屏幕高度和宽度的100％（无滚动）。我创建了一个容器（高度：100vh），其中包含所有内容，并且在该容器中，我需要其中的所有内容才能响应。

设计理念：

外部容器高度为100vh，我需要内部容器才能响应：

#root {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

#root-inner-container {
   width: 100%;
}

我遇到的问题是使用100vh，容器内的内容不会保持响应并且容易溢出。

Jsfiddle到目前为止我所拥有的：https://jsfiddle.net/fm6hmgpk/

Answer 1

您可能需要考虑使用网格。对于浏览器支持，您可以查看here。

要了解如何使用网格，请检查here。

body {
  margin: 0
}

#root {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 3fr 1fr 3fr;
  grid-template-rows: 1fr 3fr 1fr;
  background-color: #fff;
  color: #444;
  width: 100vw;
  height: 100vh;
}

.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
  font-size: 150%;
}

.navbar {
  grid-column: 1 / 4;
  grid-row: 1;
}

.content {
  grid-column: 1;
  grid-row: 2 / 3;
}

.list {
  grid-column: 2;
  grid-row: 2;
}

.image {
  grid-column: 3 / 4;
  grid-row: 2 / 4;
}

.text {
  grid-column: 1 / 3;
  grid-row: 3 / 4;
}

<div id="root">
  <div class="navbar box">Navbar</div>
  <div class="content box">Content</div>
  <div class="list box">List</div>
  <div class="image box">Image</div>
  <div class="text box">Text</div>
</div>

Answer 2

我认为这是因为你的高度是固定的高度所以如果你的根高度小于那些高度的总和它会溢出。你也可以使用vh。

Answer 3

Flex解决方案

＆＃13;

body {
  margin: 0;
  color: white;
}

.container {
  background: grey;
  width: 100vw;
  height: 100vh;
}

.navbar {
  height: 15vh;
  background: darkblue;
  margin: 0 10px;
}

.bottom {
  background: lightgrey;
  height: 85vh;
  margin: 0 10px;
  display: flex;
}

.left-bottom {
  background: red;
  width: 70%;
  display: flex;
  flex-direction: column;
}

.right-bottom {
  flex: 1;
  background: lightgrey;
}

.content-list {
  display: flex;
  height: 80%;
  background: maroon;
}

.text {
  flex: 1;
  background: green;
}

.content {
  width: 80%;
  background: orange;
}

.list {
  flex: 1;
}

＆＃13;

<div class="container">
  <div class="navbar">
    NAVBAR
  </div>
  <div class="bottom">
    <div class="left-bottom">
      <div class="content-list">
        <div class="content">
          CONTENT
        </div>
        <div class="list">
          LIST
        </div>
      </div>
      <div class="text">
        TEXT
      </div>
    </div>
    <div class="right-bottom">
      IMAGE
    </div>
  </div>
</div>

＆＃13;

计算:(对于滚动问题）

<body>默认margin:8px;和您的border:2px solid black; 总结为10px，因此我们需要扣除两倍10px

因此height: calc(100vh - 20px);

修改

要使其响应，您需要清除px
的固定li值

＆＃13;
＆＃13;
li {} #root { display: flex; position: relative; height: calc(100vh - 20px); border: 2px solid black; } #root-inner-container { flex: 1; width: 100%; display: flex; } .app-container { flex: 1; display: flex; } .div-1, .div-2 { flex: 1; display: flex; } ul { flex: 1; display: flex; flex-direction: column; } li { flex: 1; border: 1px solid red; }
＆＃13;
<div id="root"> <div id="root-inner-container"> <div class="app-container"> <div class="div-1"> <ul> <li>div 1 - One</li> <li>div 1 - Two</li> <li>div 1 - Three</li> <li>div 1 -Four</li> </ul> </div> <div class="div-2"> <ul> <li>div 2 - One</li> <li>div 2 - Two</li> <li>div 2 - Three</li> <li>div 2 -Four</li> </ul> </div> </div> </div> </div>
＆＃13;
＆＃13;
＆＃13;

如何使用100vh创建一个响应的网页

3 个答案:

Flex解决方案

计算:(对于滚动问题）

如何使用100vh创建一个响应的网页

3 个答案:

Flex解​​决方案

计算:(对于滚动问题）

Flex解决方案