Div容器高度百分比不起作用
问题描述：
我知道这是一个反复出现的问题，但我已经环顾四周，并且我理解它应该如何工作，或者我认为。目前我有height:100%正文和min-height: 100%为html。如果我是正确的，百分比高度应该适用于我有直接父母身体的#bwwrap。之后，我在#bigwrap有另一个名为.container的div，但是，无论何时我通过百分比增加.container的高度，高度都不会增加。我希望能够自由地增加高度。这段代码并不包含实际的高度。我实际上有一个导航，在#bigwrap之前。另一个问题是，如果你在导航后把它放在div上，100％的高度是如何工作的，因为导航本身不算作身体“100％”高度的一部分吗？此外，移动设备和台式机都会出现问题。对于移动设备来说，它始终是屏幕的剩余高度，例如，我不能将其缩小到60％的高度。Div容器高度百分比不起作用
* {
margin: 0;
}
body {
height: 100%;
background-color: green;
}
html {
min-height: 100%;
}
#bigwrap {
position: relative;
height: 70%;;
}
.container {
display: flex; //
position: absolute;
flex-wrap: wrap;
justify-content: center;
align-items: flex-start;
height: 100%;
width: 70%;
margin: auto; //
top: 40%; //
left: 50%; //
transform: translate(-50%, -50%);
background-color: white;
}
.left, .middle, .right {
border-right: 1px solid blue;
}
.left {
display: flex;
flex-flow: column wrap;
align-items: center;
justify-content: space-around;
order: 1; //
background: red;
flex: 1 20%;
height: 100%;
}
.left img {
max-width: 100%;
}
.middle {
display: flex;
flex-flow: column wrap;
order: 2; //
background: green;
flex: 2 20%;
height: 100%;
}
.right {
text-align: center;
order: 3; //
background: yellow;
flex: 1 20%;
height: 100%;
}
.right .headbox {
border-bottom: 1px solid orange;
margin: auto;
width: 60%;
height: auto;
}
.right .list {
text-align: center;
margin: auto;
width: 60%;
height: auto;
}
.list ul {
list-style: none;
padding: 0;
}
.list a {
text-decoration: none;
color: inherit;
}
.headbox h3 {
color: orange;
}
@media all and (max-width: 500px) {
.container {
flex-flow: row wrap;
height: 100%;
}
.left img {
height: 80px;
width: 80px;
}
.left, .right, .middle {
flex: 1 100%;
}
div.logo {
margin: 0 auto;
width: 30%;
height: auto;
text-align: center;
}
* {
margin: 0;
}
#bigwrap {
position: relative;
height: 100%;
}
.container {
display: flex; //
position: absolute;
position: relative;
flex-wrap: wrap;
justify-content: center;
align-items: flex-start;
height: 60%;
width: 70%;
margin: auto;
background-color: white;
}
.left, .middle, .right {
border-right: 1px solid blue;
}
.left {
display: flex;
flex-flow: column wrap;
align-items: center;
justify-content: space-around;
order: 1; //
background: red;
flex: 1 20%;
height: 100%;
}
.left img {
max-width: 100%;
}
.middle {
display: flex;
flex-flow: column wrap;
order: 2; //
background: green;
flex: 2 20%;
height: 100%;
}
.right {
text-align: center;
order: 3;
flex: 1 20%;
height: 100%;
}
.right .headbox {
border-bottom: 1px solid orange;
margin: auto;
width: 60%;
height: auto;
}
.right .list {
text-align: center;
margin: auto;
width: 60%;
height: auto;
}
.list ul {
list-style: none;
padding: 0;
}
.list a {
text-decoration: none;
color: inherit;
}
.headbox h3 {
color: orange;
}
@media all and (max-width: 500px) {
.box img {
max-width: 100%;
margin-bottom: 9%;
}
.container {
flex-flow: row wrap;
height: 100%;
}
.left img {
height: 80px;
width: 80px;
}
.left, .right, .middle {
flex: 1 100%;
}
}
}<div id="bigwrap">
<div class="container">
<div class="left">
<img src="cat1.jpeg" alt="Picture of kid" />
<img src="cat1.jpeg" alt="Picture of kid" />
</div>
<div class="middle">
<div class="box">
<p>Sample text. Sample text. Sample text. Sample
text. Sample text. Sample text. Sample text.
Sample text. Sample text. Sample text. Sample
text. Sample text. Sample text. Sample text.
Sample text. Sample text. Sample text. Sample
text.</p>
</div>
<div class="box">
<p>Sample text. Sample text. Sample text. Sample
text. Sample text. Sample text. Sample text.
Sample text. Sample text. Sample text. Sample
text. Sample text. Sample text. Sample text.
Sample text. Sample text. Sample text. Sample
text.</p>
</div>
<div class="box">
<p>Sample text. Sample text. Sample text. Sample
text. Sample text. Sample text. Sample text.
Sample text. Sample text. Sample text. Sample
text. Sample text. Sample text. Sample text.
Sample text. Sample text. Sample text. Sample
text.</p>
</div>
</div>
<div class="right">
<div class="headbox">
<h3>Visit Us</h3>
</div>
<div class="list">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Hours</a></li>
<li><a href="#">Plan</a></li>
<li><a href="#">Directions</a></li>
</ul>
</div>
</div>
</div>
</div>
答
#bigwrap {
position: relative;
height: 70%;; //only need one semi-colon
}
高度有两个分号。但它仍然可能无法工作。所以，如果它不工作，试试这个：
body, html {
height: 100%;
}
最低高度和高度，或者只是高度需要被设置为100％。
+0
是的，我注意到了这个分号的东西，谢谢你的工作。 –
它不会在根元素上使用'min-height：100％'。它需要'html {height：100％}'... http://stackoverflow.com/a/31728799/3597276 –
如果你想让身体从最小高度展开，试试'min-height：100vh' 。那么你不需要担心在父元素上设置高度。 –
好吧，它不工作，所以也许这是flexbox的问题。这里是最小高度的jsfiddle：100vh添加。我还在两个div上添加了边框。在桌面上它不会增加。我想制作这款手机，并认为Flexbox是一个好主意，所以我宁愿保留Flexbox。 https://jsfiddle.net/89x5p0cj/ https://jsfiddle.net/89x5p0cj/ –