CODEWITHSUNDEEP
csshtml
Andrey
Andrey

Reputation: 81

div fill the remaining space screen

I want to ask can I make a div to fill the entire remaining space.

I need to make site with 2 parts - one always on top and one always on bottom

You can give me some ideas for this (without position:absolute;)

So here is my idea - 3 Divs with classes: HTML:

<div class="top"><div>
<div class="center" ></div>
<div class="bottom"></div>

Css:

.bottom{
position:relative;
width:100%;
}
.top{
display:block;
min-height: 250px;
}
.center{
display:block;
min-height:30px;
height:auto;
}

Upvotes: 0

Views: 276

Answers (2)

Jefferson
Jefferson

Reputation: 993

What I understand is you want three div's stacked on top of eachother.

<div id="container">
    <div class="top"><div>
    <div class="center" ></div>
    <div class="bottom"></div> 
</div> 

#container {
width:100%;
height:100%;
}
    .bottom{
    position:relative;
    height:25%;
    width:100%;
    }
    .top{
    position:relative;
    height:25%;
    width:100%;
    }
    .center{
    position:relative;
    height:50%;
    width:100%;
    }

Upvotes: 0

user1166905
user1166905

Reputation: 2622

If you give the divs an ID You can use jQuery like so:

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

function resizeWindow() {
    var sHeight = $(window).height();
    var tHeight = $("#top").height();
    var bHeight = $("#bottom").height();
    var nHeight = sHeight - tHeight - bHeight;
    $("#center").height(nHeight);
}

The resize part also allows for anyone resizing the screen and if someone with a tablet/smartphone changes the orientation.

Upvotes: 1

Related Questions