我知道这是一个反复出现的问题,但是我已经环顾四周,并且了解它应该如何工作,或者我想。目前,我在正文中使用height:100%
,在html中使用min-height: 100%
。如果我是正确的,那么百分比高度应该适用于我的直接父是身体的#bigwrap。之后,我在.container
中又有了一个称为#bigwrap
的div,但是,每当我通过百分比增加.container的高度时,高度根本不会增加。我希望能够自由增加高度。此代码段不覆盖实际高度。我实际上在#bigwrap
之前有一个导航。我还有一个问题是,如果在导航后将其放在div上,则100%的高度如何工作,因为导航本身不会算作身体的“ 100%”高度的一部分吗?移动和台式机上也都出现了问题。也就是说,对于手机而言,它始终是屏幕的剩余高度,例如,我无法将其缩小到60%的高度。
* {
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%。