CODEWITHSUNDEEP
htmlcss
Imesh Chandrasiri
Imesh Chandrasiri

Reputation: 5679

Content div not resizing as needed

I've got the following three divs in my webpage!

#header { //top div
height: 60px;
min-width: 1024px;
background-image: url(../images/header_bg.jpg);
background-repeat: repeat-x;
display: block;
}

#content { //middle div
min-width: 1024px;
min-height: 585px;
}

#buttons { //bottom div
min-width: 1024px;
height: 120px;
max-height: 120px;
background-color: rgba(229, 229, 255, 0.76);
}

example picture

as shown in the image, when the resolution changes, the content div does not extend! how can I make the content div expand to fit the page size! without getting any vertical scroller!

Upvotes: 0

Views: 225

Answers (2)

Pete
Pete

Reputation: 58432

given you have a fixed height footer and header, you can achieve what you want with the following html and css

HTML

<div id="wrapper">
    <div id="header">
    </div>
    <div id="content">
    </div>
    <div id="buttons">
    </div>
</div>

css

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

#wrapper {padding:60px 0 120px 0; position:absolute; top:0; bottom:0; left:0; right:0;}
#content {min-height:100%;}
#header {margin-top:-60px; height:60px;}
#buttons {margin-bottom:-120px; height:120px;}

Example

Upvotes: 1

Toon Casteele
Toon Casteele

Reputation: 2579

Say you want your header and buttons to have a fixed width you can do this with your content:

#header.row { height: 60px; top: 0; }
#content.row { top: 60px; bottom: 120px; border: 1px solid black;}
#buttons.row { height: 120px; bottom: 0; }

http://jsfiddle.net/5hx5v/

Upvotes: 0

Related Questions