Creating a div with a relative size, between absolute sized content

Question

I'm looking for a way to create a div that has a relative size, adjusted to the browser's height. Problem is that I dont really know where to start, or how to do it.

Basically I will have a header, which will be 50px heigh, and the relative div below there. Below that div, theres another div that HAS to be 50px inside the screen (Without scrolling). More content of that div, or another div (I dont mind which one) will be outside the screen.

So if the browser is 1000px heigh, 100px will be spend for the top and bottom divs. That means the relative div must be 900px heigh.

To support the idea I have made a simple image of what I'm willing to achieve: (Yeah, paint skills, got no Photoshop at my current location)

Demo

The orange border would represent the size of the complete page.

I know this is pretty easy to do with JavaScript, that wouldn't be a challenge for me, but I'm trying to find a CSS-only solution if possible. Any ideas?

possible duplicate of [Fluid height main body with header and footer](http://stackoverflow.com/questions/14892047/fluid-height-main-body-with-header-and-footer) — isherwood, Oct 17 '13 at 15:20
@isherwood Comes close, but when inspecting the divs using Chrome, the middle div seems to use the complete height, and only displays its content in the middle. Not exactly what I'm searching for, but it shows the idea. — Deltanic, Oct 17 '13 at 15:24
Fair enough, but you haven't shown us what you've tried. That's sort of expected. — isherwood, Oct 17 '13 at 15:28
"I dont really know where to start" :P I'll have a look into using the method you linked though. — Deltanic, Oct 17 '13 at 15:31
This question (and variations of it) come up often on SO. Pick one approach and try it, then ask for more specific help. — isherwood, Oct 17 '13 at 15:32

score 0 · Answer 1 · answered Oct 17 '13 at 15:32

An idea, using % instead of px for header and footer : here

<div id='header'></div>
<div id='content'>
    <div id='scrollable'>this is my content</div>
</div>
<div id='footer'></div>

And CSS body { height:100%; } #header { width:100%; height:15%; position:absolute; top:0; background:red; margin:0; }

#footer {
    width:100%;
    height:15%;
    position:absolute;
    bottom:0;
    background:blue;

}

#content {
    position:absolute;
    width:100%;
    top:15%;
    height : 70%;
    background:yellow;
    overflow-y:auto;
}
#content #scrollable {
     min-height:100%;
}

Everywhere, because I dont want everything to be relative. That just won't ever be nice. — Deltanic, Oct 17 '13 at 15:56

score 0 · Answer 2 · answered Oct 17 '13 at 15:32

0

So I think this is what you want

<div id="scrn">
<div id="top"></div>
<div id="bottom"></div>
</div>

Then some CSS

#scrn {
 height: 1700px;
 width: 100%;
 position: relative;
 }
#top {
 height: 50px;
 width: 100%;
 position: fixed:
 top: 0px;
 }
#bottom{
 height: 50px;
 width: 100%;
 position: fixed;
 bottom: 0px;
 }

This looks right I think? Also I put the position: relative and height in because I am not 100% sure what you are trying to achieve with it.

answered Oct 17 '13 at 15:32

jonode

797
4
15

Fixed position? Naah, that's not going to work for this case. It would leave the divs right in your screen when you try to scroll. – Deltanic Oct 17 '13 at 15:35
Ah, I didn't derive that he wanted to pass over them when he scrolls. That explains the javascript portion. – jonode Oct 17 '13 at 15:49

chrisgonzalez · Answer 3 · 2013-10-17T16:58:29.440

Ok! Here's a technique I've used a bunch- this will work best if you don't fix the height of your relative positioned div. Based on your description, this is not the intent so it should work fine.

Basic Markup:

<body>

    <header>DIV 1 - 50PX</header>

    <div class="main">MAIN STUFF - RELATIVE</div>

    <footer>DIV 2 - 50PX</footer>

</body>

CSS:

body, html{
    width:100%;
    height:100%;
}

body{
    margin:0;
    positino:relative;
}

header{
    position:absolute;
    width:100%;
    height:50px;
    top:0;
    left:0;
    background:#666666;
    color:#ffffff;
    z-index:10;
}

footer{
    position:absolute;
    width:100%;
    height:50px;
    bottom:0;
    left:0;
    background:#555555;
    color:#ffffff;
    z-index:10;
}

.main{
    position:relative;
    box-sizing:border-box;
    padding:50px 1em;
    height:150%; /* this is to simulate your dynamic content */
    background:#cccccc;
}

http://jsfiddle.net/xdeQ6/1/

Adding padding to the main content div will make sure that your actual content at the top and bottom of your page is not hidden behind the header and footer divs.

As I already said in reply to user2879869, I don't really want the header and footer to have a fixed position. — Deltanic, Oct 17 '13 at 15:57
Is the center div supposed to scroll? Is the page supposed to scroll? — chrisgonzalez, Oct 17 '13 at 16:46

score 0 · Answer 4 · answered Oct 18 '13 at 08:18

Here is my approach:

header, footer {
    background: #f00;
    position: fixed;
    width: 100%;
    height: 50px;
    left: 0;
}
header {
    top: 0;
}
footer {
    bottom: 0;
}

#content {
    margin: 50px 0;
}

See my fiddle: http://jsfiddle.net/Vw97D/1/
Does it meet your expectations?

Creating a div with a relative size, between absolute sized content

4 Answers4