CODEWITHSUNDEEP
csspositionabsolute
vastur
vastur

Reputation: 71

CSS vertical positioning: relative top + absolute bottom

I need to define a div that is preceded by any number of elements with arbitrary height, but it should fill the remaining space until the bottom of the fold.

The way I thought about doing this is to position the top with relative and the bottom with absolute, but I'm not sure if that's even possible in CSS.

#header {
    border: 1px solid green;
    width: 100%;
    height: 100px;
}

#fill-the-fold {
    border: 1px solid red;
    position: absolute;
    height: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
<div id="header"></div>
<div id="fill-the-fold"></div>

Basically, I want the red container to start below the green and fill the space to the bottom of the page.

Any help on how to accomplish that, or if there's any easier way to go about it, much appreciated.

Upvotes: 3

Views: 1943

Answers (2)

Jon Fagence
Jon Fagence

Reputation: 180

This is answered here.

In short - use flexbox if you can. Key items:

  • you'll need a flexbox wrapper around your 2 divs, with flex-direction: column
  • add flex-grow: 1 to #fill-the-fold.

Another possibility I couldn't see mentioned in the link above is to oversize the second div and chop off the bottom with a wrapper - fiddle. This is obviously only good when you don't mind losing the bottom of your second div.

Upvotes: 1

Ire
Ire

Reputation: 279

You can reach your purpose by applying margin trick. JSFiddle

HTML:

<div id="header"></div>
<div id="fill-the-fold">
    <div id="content">

    </div>
</div>

CSS:

html,body{ margin:0px; height:100%;} 
div{
    box-sizing: border-box;
}
#header {
    border: 1px solid green;
    width: 100%;
    height: 100px;
}

#fill-the-fold {
    margin-top: -100px; /* shifting it covers head */
    padding-top: 100px; /* shifting the content under the head */
    height: 100%;
}

#content{
    border: 1px solid red;
    height: 100%;
}

Append your red-border part after the head, and shifting it by negative margin. Then write your real content in the inner one.

Upvotes: 0

Related Questions