1 reply [Last post]
quyen86nv
quyen86nv's picture
Offline
newbie
Last seen: 7 years 34 weeks ago
Timezone: GMT+7
Joined: 2013-04-09
Posts: 1
Points: 2

Steve

Any one can HELP me ?

I tried many Days, and many source. But, I can find answer.

I need creat 4 DIV by CSS.

Header div is 100px, and always in TOP.

Footer div is 100px, and always in BOTTOM (also, if client browser resize, it always in Bottom, no change Layout)

Left div is Width 200px (Height: auto fill)

MAIN div is AUTO fill Height and Width (overflow is Scroll bar)

Please, help me FULL CODE HTML, or CSS, or Javascript. Because, I not good for CSS...
please, see this picture:

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 day 14 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

You could try something

You could try something like:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html, body{
  height:100%;
  margin:0;
}
#head, #foot{
  height:100px;
  background:red; 
}
.col{
  height: 100%; /* browsers that don't support calc. */
  height:calc(100% - 200px);
  margin:0;
  background:blue;
  display:inline-block;}
#sidebar{
  width:200px; 
  margin:0 10px;
}
#main{
  margin:0;
  width: 70%; /* no calc */
  width:calc(100% - 230px);
}
</style>
</head>
<body>
<div id="head"> </div>
<div id="sidebar" class="col"> </div>
<div id="main" class="col"> </div>
<div id="foot"> </div>
</body>
</html>

Which works for me in Chrome and Firefox at least.
Check the how to section about 100% height etc.