CODEWITHSUNDEEP
jqueryhtmlcss
Gabe
Gabe

Reputation: 50533

Static container height combined with a dynamically sized container, possible?

Is there a way to have two <div> containers, one having a static height, and a second underneath dynamic, basically just takes up the remaining portion of the viewport?

Inside the the dynamic container, if there is overflow within, the container itself would show scrollbars accordingly. That way the viewport should ever need a y-axis scrollbar.

Example

Any ideas? Would it require a lot of scripting or could it be done purely with css?

Upvotes: 1

Views: 260

Answers (3)

buryat
buryat

Reputation: 384

http://jsfiddle.net/kKgQb/29/

.content{
    position:absolute;
    top: 212px;
    bottom: 10px;
    left: 10px;
    right: 10px;
    height: auto;

    outline: 1px solid red;   
    overflow-y: scroll;
    overflow-x: hidden;
}

.header{
    height:200px;
    outline: 1px solid green;
}

Upvotes: 1

tw16
tw16

Reputation: 29625

I would do it like this: http://jsfiddle.net/tw16/X5rWb/

CSS:

.content{
    border: 1px solid red;
    overflow-y: auto; /* now scrollbars will only appear when needed */
    overflow-x: hidden;
}

jQuery:

$(function () {
    adjustHeight();
});

$(window).resize(function () {
   adjustHeight();
});

function adjustHeight() {
    var windowHeight = $(window).height() - 2;
    var headerHeight = $('.header').outerHeight();

    $('.content').height(windowHeight - headerHeight);
}

The 2 in windowHeight comes from adding the 1px top and 1px bottom border of the .content div together.

Using outerHeight() for the .header means there is no need to make any additions as the top and bottom padding and borders are included. If you were to use outerHeight(true) this would also include the top and bottom margin.

Upvotes: 1

Amin Eshaq
Amin Eshaq

Reputation: 4024

if your header is static, you could set the height of the container via javascript 

var windowHeight = $(window).height();

$('.content').height(windowHeight - $('.header').height())

This doesn't account for padding or margins, but it should give you an idea. You might also want to run this anytime the browser gets resized.

$(window).resize(function() {
   doResize();
});

function doResize(){
    var windowHeight = $(window).height();

    $('.content').height(windowHeight - $('.header').height())
}

Upvotes: 0

Related Questions