div position absolute height not working
The problem is that the first and second <div>
element within the .step-1
don't have an explicit top
value. Hence the next absolutely positioned DIVs overlap those two:
.step-1 > div:first-child {
background: #DDD;
left: 0;
top: 0; /* Added declaration */
}
.step-1 > div:nth-child(2) {
background: #CCC;
right: 0;
top: 0; /* Added declaration */
}
On the other hand, the #content
itself should be positioned absolutely in this case in order to fill the remaining space between the header and the footer:
#content {
position: absolute;
top: 160px; /* = height of the header */
bottom: 60px; /* = height of the footer */
width: 100%;
}
Personally, I prefer creating a new containing block for the absolutely positioned elements instead of relying to the initial containing block. Because of that, In the above demo I positioned the .outer
element relatively:
.outer {
position: relative;
height: 100%;
}
Oterox
Updated on June 04, 2022Comments
-
Oterox almost 2 years
I'm trying to create a layout with a header, a main content area and a footer.
Both header and footer are fixed height but content area needs to fill the width and height (without scrollbars)
the current code is here
<div class="outer"> <header> movistar ovacion </header> <div id="content" > <section class="step-1"> <div class="box"> <a href="#">HOMBRE</a> </div> <div class="box"> <a href="#">MUJER</a> </div> <div class="box"> <a href="#">NIÑO</a> </div> <div class="box"> <a href="#">NIÑA</a> </div> </section> </div> <footer> footer </footer> </div>
The CSS:
html,body{ height: 100%; } header { height: 160px; background: blue; } #content { } footer { height: 60px; position:absolute; width:100%; bottom:0; background: green; } .outer { } .step-1 > div { width: 50%; height: 50%; position: absolute; } .step-1 > div:first-child { background: #DDD; left: 0; } .step-1 > div:nth-child(2) { background: #CCC; right: 0; } .step-1 > div:nth-child(3) { background: #72CCA7; left: 0; bottom: 0; } .step-1 > div:nth-child(4) { background: #10A296; right: 0; bottom: 0; }
Right now the content area doesn't work as it should, the 4 boxes doesn't adapt to the height.
I think i'm doing something wrong with div positions or clearings but i can't find the problem.
How can i fix it? Is there a better way of doing this layout?
-
Oterox about 10 yearshow could i add a left sidebar full height too? outside .outer div and floated left or inside outer div?
-
Hashem Qolami about 10 years@Oterox Sorry for the late response, you could also achieve that like this.