如何使用100vh为响应创建一个网页(How to create a web page using

我需要创建一个使用100vh，或占用屏幕的高度和宽度（没有滚动）100％的网页。我创建了一个容器（高度：100vh），在它拥有的一切，而容器内，我需要的任何东西来响应。

设计理念：

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

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

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

我遇到的问题是使用100vh，容器内的内容不留敏感和容易溢出。

的jsfiddle什么，我到目前为止有： https://jsfiddle.net/fm6hmgpk/

Answer 1:

Flex的解决方案

 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; }

 <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>

计算：（滚动发行）

<body>默认margin:8px; 和你的border:2px solid black; 总计为10px ，所以我们需要扣除两次10px

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

编辑：

为了让您回应需要摆脱固定的px值，您li

 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; }

 <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>

Answer 2:

您可能要考虑使用网格。对于浏览器的支持，您可以检查在这里。

要了解如何使用网格，请点击这里。

 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>