CODEWITHSUNDEEP
htmlcsspositionabsolute
someuseryoudontknowthenameof
someuseryoudontknowthenameof

Reputation: 161

Placing relative pos. div below absolute pos. div

Hi,

I know this question is very similar to others, and i've checked them but I can't make it work and my problem is a little different.

First I have a block with 100% height of viewport. It must be positioned absolute otherwise I can't make it 100% of the viewport. Then there is a block which height will be determined by it's content. Now the problem is that the last block won't be placed below the absolute one because they will overlap because the first one has position: absolute. I can make it work by relatively positioning the second, but I want to have more than 1 block like the second below.

This is what I want

 ______________________
|                      |
|     height:100%;     | position:absolute;
|______________________|
|                      |
|   SometextSometext   | height:auto;
|   SometextSometext   | /*determined by it's content*/
|______________________|
|                      |
|   SometextSometext   | height:auto;
|   SometextSometext   | /*determined by it's content*/
|______________________|

Upvotes: 1

Views: 71

Answers (1)

SW4
SW4

Reputation: 71140

Remove the positioning from the first div an set its height to 100vh

More on vh from MDN

vh 1/100th of the height of the viewport.

html,
body {
  height: 100%;
  margin: 0;
}
section:first-of-type {
  height: 100vh
}
section {
  border: 1px solid;
  box-sizing: border-box;
}
<div></div>
<div>content</div>
<div>content
  <br />content
  <br />content
  <br />content
  <br />content
  <br />
</div>

Upvotes: 1

Related Questions