CSS fill parent available space

Question

I know that question asked a lot of times, but I didn't found solution to my problem.

I have this html code:

<html style="height: 100%">
    <body style="height: 100%">
        <div style="height: 100%">
            <div>Title</div>
            <div style="height: 100%">Content</div>
        </div>
    </body>
</html>

I want that my DIV with the content will fill the rest space in the parent div.
Every question that I saw before said to do style="height: 100%" in the child DIV. With style="height: 100%" it gets the same size of the parent div, so my page became larger then 100% (the page have scrollbar).

height: 100%

(The html, body and parent div tags are same as the viewport)

I just want to fill the parent div with the available free space, not more than that.

fill available space

And here you can find live example.

Can I do it?

Sure, http://jsfiddle.net/JD5N8/. As you can see I added the borders, like in my images. — nrofis, Jun 28 '14 at 12:12
possible duplicate of [Make a div fill the height of the remaining screen space](http://stackoverflow.com/questions/90178/make-a-div-fill-the-height-of-the-remaining-screen-space) — Zach Saucier, Jun 28 '14 at 12:15
In that case you can use the linked question above. If you were looking to support IE10+, you could likely use flexbox (a better option) — Zach Saucier, Jun 28 '14 at 12:17
If the content in the `content div` is too large (would overflow), which element should scroll (if any)? — try-catch-finally, Jun 28 '14 at 12:18
This can't be everything: you could add a background to the body, move it horizontally down by `title div` height, give `title div` background and there you go (if your questions is only about styling). Is there also a footer? Will there be effects, something that relies on an independant element within the body? — try-catch-finally, Jun 28 '14 at 12:30

NoobEditor · Accepted Answer · 2014-06-28T12:11:46.390

1

Why would you want to make title 100% height.....there is no point of it.....general idea is to have a container with 100% height and in that you create your child class divs

make title 20% and content 80% - preferably, best option
fiddle
or use overflow:hidden on content - only if you know for sure that content is not in excess to be hidden, this option is only to hide the excess of div when content is not there
or use calc() in css (cross browser but not supported by old browser)
fiddle

edited Jun 28 '14 at 12:11

answered Jun 28 '14 at 12:06

NoobEditor

15,563
19
81
112

I don't know the title size. It can be bigger or include images, so I cant set it size. also the content can be very long, so the overflow is important. The min height of the content should fill the parent. – nrofis Jun 28 '14 at 12:09
`overflow:hidden` is not a solution, it just ignores the situation – Zach Saucier Jun 28 '14 at 12:09
`calc` is cross browser, just not in old browsers – Zach Saucier Jun 28 '14 at 12:10
I dont want to make the title 100% height. Just that the content will fill the rest of the space. – nrofis Jun 28 '14 at 12:14
@ZachSaucier : yeah...i meant the same...but english beats me...and please allow and wait for edits in first 10mins.....updated! :) – NoobEditor Jun 28 '14 at 12:16
@NoobEditor What can I do if I don't know what is the height of the title? – nrofis Jun 28 '14 at 12:17
@nrofis : consider `calc` if you want to *fix* the title..its a handy tool in CSS!! :) – NoobEditor Jun 28 '14 at 12:18
@nrofis : whats gonna be the content in `title` part?? 1 image and 1 line text or would it be dynamic? – NoobEditor Jun 28 '14 at 12:18
it would be Dynamic. The font is large, and I cant know how many lines will be in it. Images can be also in the title – nrofis Jun 28 '14 at 12:20
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/56459/discussion-between-noobeditor-and-nrofis). – NoobEditor Jun 28 '14 at 12:21

score 1 · Answer 2 · answered Jun 28 '14 at 13:00

This can be done without Javascript at all.

Assuming:

there are no other sections/elements (required)
the title might be fix-height (I assume this cheekily)

Position the title div and the content div both absolute and wrap the content within another div that's allowed to overflow. The content div will be positioned from top and from bottom.

HTML Structure:

<div class="title">
    Title
</div>
<div class="content">
    <div class="content-content">
        Content
    </div>
</div>

CSS:

html, body {
    height: 100%;
    margin: 0;
}

.title {
    top: 0;
    position: absolute;
    width: 100%;
    height: 200px;
}

.content {
    width: 100%;
    position: absolute;
    top: 200px;
    bottom: 0;
}

See this Fiddle: http://jsfiddle.net/43zF2/

score 0 · Answer 3 · edited May 23 '17 at 12:07

0

It seems it not possible through only css. You can use jquery.

Try this demo. With this, you can manage the responsive layout also

http://jsfiddle.net/amoljawale/7WC7N/25/

EDIT

http://jsfiddle.net/amoljawale/7WC7N/27/

var _init = function () {
    parentHeight = $('.parent').outerHeight(true);
    titleHeight = $('.title').outerHeight(true);
    childHeight = parentHeight - titleHeight;
    $('.child').height(childHeight);
}
$(document).ready(function () {
    _init();
})
$(window).resize(function () {
    _init();
});

edited May 23 '17 at 12:07

Community

1
1

answered Jun 28 '14 at 12:22

amol

1,535
9
10

Yes thats true. I have made some changes in code Try this link `http://jsfiddle.net/amoljawale/7WC7N/27/`. I have used `outerHeight(true)` instead of `outerHeight()` and it works with the margin also. – amol Jun 28 '14 at 12:35

try-catch-finally · Answer 4 · 2014-06-28T16:29:03.427

Another Javascript-less solution, that is more flex ible is using Flexbox.

In contrast to my other answer this also allows flexible title height too.

HTML Structure:

<div class="title">
    Title
</div>
<div class="content">
    <div class="content-content">
        Content
    </div>
</div>

CSS:

html, body {
    height: 100%;
    margin: 0;
}

body {
    display: flex;
    flex-direction: column;
}

.content {
    flex: 1;
}

The body is in flex-column mode. The content has a flex value of 1 to fill the body. The content-content wrapper is allowed to overflow.

This works in Firefox 28+ and Chrome 33+ and should work in IE 11+ (can't test it ATM). IE 10 probably needs some quirky (CSS) workarounds/additions and vendor-prefixes of course.

You can use flexbox

See this Fiddle http://jsfiddle.net/J63vF/1/

CSS fill parent available space

4 Answers4