如何使用100vh创建网页以响应 [英] How to create a web page using 100vh to be responsive
问题描述
我需要创建一个使用100vh或占用屏幕高度和宽度100％(无滚动)的网页.我创建了一个容器(高度:100vh)来容纳其中的所有内容，并且在该容器中，我需要其中的所有内容才能做出响应.
I need to create a web page that uses 100vh, or takes up 100% of the screen height and width (no scroll). I created a container(height:100vh) that holds everything in it, and within that container, I need everything in there to be responsive.
设计概念:
外部容器的高度为100vh，我需要内部容器做出响应:
The outer container height is 100vh and I need the inner container to be responsive:
#root {
position: relative;
height: 100vh;
overflow: hidden;
}
#root-inner-container {
width: 100%;
}
我遇到的问题是使用100vh，容器内的内容没有保持响应状态，并且倾向于溢出.
The problem I run into is by using 100vh, the content inside the container does not stay responsive and tends to overflow.
Jsfiddle了解到目前为止的内容: https://jsfiddle.net/fm6hmgpk/
Jsfiddle to what I have so far: https://jsfiddle.net/fm6hmgpk/
推荐答案
Flex解决方案
Flex Solution
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
<body> default margin:8px; and your border:2px solid black;
Sums up to 10px so we need to deduct twice of 10px
因此height: calc(100vh - 20px);
要使其具有响应能力，您需要将固定的px值除为您的li
To make it responsive you need to get rid of fixed px value to your 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>
这篇关于如何使用100vh创建网页以响应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
