Few years ago making dynamical web pages (pages that change size depending on the browser screen size) requires using tables. Now they aren't used that much anymore and tableless design is used instead with CSS.
This makes it possible to create a separate css file that will define properties of the table elements.
It took me some time to search for the code that will work exactly the way I want it to work. I still need to figure out how to fix the top and bottom to pixel sizes instead of percentages but so far it looks ok.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Test 100% height</title>
<style type="text/css">
html, body
{
height:100%;
background-color: #000;
margin:0;
padding:0;
}
#main{
background-color: #333; /* for middle column */
width: 100%;
height: 100%;
text-align:center;
vertical-align: middle;
}
p {
margin:0;
padding:0;
}
#main_top {
background-color: #666;
height:10%;
}
#main_middle
{
background-color: #999;
height:70%;
}
#main_bottom {
background-color: #BBB;
height:20%;
}
</style>
</head>
<!-- Main body -->
<body>
<div id="main" class="gallery_main">
<div id="main_top" class="main_top"><p>TOP</p></div>
<div id="main_middle" class="main_middle"><p>MIDDLE</p></div>
<div id="main_bottom" class="main_bottom"><p>BOTTOM</p></div>
</div>
</body>
</html>
As you can see there is one main div and 3 child divs. Each has percentage of the height it occupies specified. You can try to resize the window, and it will keep the div sizes also proportional.
Posts
0 comments:
Post a Comment