1
我知道這是一個反覆出現的問題，但我已經環顧四周，並且我理解它應該如何工作，或者我認爲。目前我有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>
它不會在根元素上使用'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/ –