3

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.

vastur
  • 71
  • 3

2 Answers2

1

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.

Jon Fagence
  • 170
  • 2
  • 8
0

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.

Ire
  • 279
  • 1
  • 8
  • I see. It's a nice trick, the only thing is that it still forces you to know the height of the preceding elements (100px) which in my case I don't. They could be any arbitrary height. – vastur Feb 02 '15 at 04:05
  • 1
    Also, I believe the same could be achieved with a "top: 100px" on the red element positioned absolute. But as mentioned, I'd like to assume we don't know the 100px height. – vastur Feb 02 '15 at 04:12
  • Well, as I know, there is not a way to fill the remaining arbitrary height. Hope there is someone else can show us how to accomplish this. :) – Ire Feb 02 '15 at 04:13
  • The problem of position:absolute is if there are more items in this frame, absolute position causes more trouble. – Ire Feb 02 '15 at 04:15
  • If you want to do a css satisfies arbitrary height, maybe you can try scss. It allows you declare variables in the css. :) – Ire Feb 02 '15 at 04:17