I have written a html page where i want a header,content,footer. All these three portions are enclosed in divs and it looks as below
But i observe that the header div does not occupy the full space which was provided(ie.,height: 50% in CSS)
and the content div (containing table) does not occupy the space available between header and footer divs though a height of 100% is spaecified in CSS
The html written is as follows.Am i missing something .
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Html with divs</title>
<style type="text/css">
h1,h2,h3,h4,h5,h6{
font-size:100%;
font-weight:normal;
}
q:before,q:after{
content:'';
}
abbr,acronym{
border:0;
}
html{
height:100%;
}
body{
font-family:Arial,Verdana,sans-serif;
font-size:0.75em;
color:#333;
width:100%;
margin:0 auto;
padding:0px;
}
#header1
{
background-color: steelblue;
height: 50%;
}
h1{
font-family:Calibri, Arial, Verdana, sans-serif;
font-size:2em;
width:520px;
}
#content
{
background-color: orange;
padding: 5px;
height:100%;
}
#content table
{
width:100%;
}
#footer {
position:absolute;
bottom: 0px;
width: 100%;
height:70px;
}
#footer div#navigation {
background: steelblue;
height: 70px;
width: 100%;
}
#footer div#navigation div {
margin: 0 auto;
width: 100%;
}
#footer div#navigation div p {
color: #995870;
color:white;
width:100%;
align:center;
font-size: 11px;
margin: 0;
text-align: center;
}
</style>
</head>
<body>
<div id="header1">
<p align="center">Header1</p>
<p align="center">Header2</p>
<p align="center">Header3</p>
</div>
<div id="content">
<table bgcolor="#fadd09" align="center" style="color:white">
<tr><td>Text1 here</td><td> <input type="text" name="value1"/></td></tr>
<tr><td>Text2 here</td><td> <input type="text" name="value2"/></td></tr>
<tr><td>Text3 here</td><td> <input type="text" name="value3"/></td></tr>
<tr><td>Text4 here</td><td> <input type="text" name="value4"/></td></tr>
<tr><td>Text5 here</td><td> <input type="text" name="value5"/></td></tr>
<tr><td>Text6 here</td><td> <input type="text" name="value6"/></td></tr>
<tr><td>Text7 here</td><td> <input type="text" name="value7"/></td></tr>
<tr><td>Text8 here</td><td> <input type="text" name="value8"/></td></tr>
<tr><td>Text9 here</td><td> <input type="text" name="value9"/></td></tr>
<tr><td>Text10 here</td><td> <input type="text" name="value10"/></td></tr>
</table>
</div>
<!--Footer-->
<div id="footer">
<div id="navigation">
<p style="color: ivory;font-size: 15px;">footer-head</p>
<div style="float: inherit">
<p>The footer</p>
</div>
</div>
</div>
</body>
</html>
Setting height to 100% on the html and body to will allow you to specify a percentage height on the divs, but there are still a number of problems with your page. I’ve created a simpler example based on your code.
Explanation:
I added a doctype at the top of the page, so that you get a more consistent result between browsers. I’ve added the transitional doctype.
Each region is surrounded by a ‘container’ div, which is where the height is specified. The headercontainer is set to 50%, contentcontainer set to 40%, and the footer to 10%. In your code, you had the footer absolutely positioned at the bottom of the page. This seems to work fine, but it was actually chopping/overlapping the bottom of the content div.
The container divs all have overflow: auto; set, so that if the page is resized, scrollbars will appear in each section if the content is too long (test it out).
The inner divs, ‘header’, ‘content’ and ‘footer’ should contain any page content, so that margins/paddings that occur on elements like p, h1, or anything else for that matter won’t cause your page to become larger than 100% – In your page, you had a ‘p’ element directly within the header1 div, which was causing a white bar to appear at the top of your page (due to the 10px margin at the top of the p element by default).
Here is the code:
Hope that helps 🙂