Shinji-san Shinji-san - 4 months ago 14
HTML Question

Div container height percentage not working

I know that this is a recurring question but I already looked around and I understand how it's supposed to work, or so I think. Currently I have

height:100%
for body and
min-height: 100%
for html. If I'm correct, percentage height should work for the #bigwrap that I have whose immediate parent is body. Following that, I have another div called
.container
in
#bigwrap
, however, whenever I increase the height for .container via percentage the height doesn't increase at all. I would like to be able to increase the height freely. This snippet doesn't cover the actual height. I actually have a navigation which comes before the
#bigwrap
. Another question I have is how does 100% height work if you put it on a div after the navigation, because wouldn't the navigation itself count as part of the body's '100%' height? Also the problem is occurring on both mobile and desktop. That is for mobile it's always the remaining height of the screen, I can't shrink it down to 60% height, for example.



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




Answer
#bigwrap {
    position: relative;
    height: 70%;; //only need one semi-colon
}

The height has two semi-colons. But it still might not work. So if it doesnt work, try this:

body, html {
   height: 100%;
}

Minimum height and height, or just height needs to be set to 100%.

Comments