I am trying to make a layout with header, content and footer. The footer should be at the bottom of the page (done). But my problem is how can I get 100% content between the header and footer. When my content is empty, I donโt see it, but when I write some word in html in the content div, for example, โhelloโ, then the content will only be longer than the content in the content. You probably understand what I mean. Can someone explain what is wrong in my css code.
The title is red, green is the footer, cyan is the content, and blue is the container. The problem is that the content does not cover the container area.
<!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>Praktika1</title> <link rel="stylesheet" href="style1.css" type="text/css" /> </head> <body> <div id="container"> <div id="header"> </div> <div id="content"> </div> <div id="footer"> </div> </div> </body> </html>
CSS:
@CHARSET "UTF-8"; *{padding:0; margin:0;} html,body{ height:100%; } #container{ width: 1024px; position:relative; background-color:#cce; margin: 0 auto; min-height:100%; } #header{ width: 1024px; height:100px; background-color: #CCC; } #content{ height:100%; width:1024px; background-color:yellow; } #footer{ width: 1024px; height: 100px; position:absolute; bottom:0; background-color: #ced; }
source share