フッターがページの下部に貼り付くという深刻な問題があります。私はインターネットで見つけたたくさんのチュートリアルを試しましたが、どれもうまくいきませんでしたか?!私が何をしても、フッターをcontainer-divの外に置いても、フッターは常にcontent-divのコンテンツの下にありますか?!?!
これが私のコードです。私が間違っていることをあなたが見て教えてくれることを願っています...
私もクリーナーを試してみましたが、うまくいきませんでした...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled</title>
</head>
<style>
/*=============== HTML ============*/
html
{
min-height: 100%;
}
/*=============== Body ============*/
body {
font-family: Verdana, Tahoma, Helvetica, Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #FFFFFF;
min-height:100%;
height: auto;
width: 100%;
}
/*=============== Container ============*/
.container
{
width: 98%;
margin: 0px auto 0px auto;
padding: 5px 0 0 0;
background-color: #F5F5F5;
height: 100%;
position:relative;
}
/*=============== Højre/reklame ============*/
.commercial
{
width:200px;
height:90%;
float:right;
background-color:inherit;
margin: 0px 5px 5px 5px;
padding:5px 5px 5px 5px;
}
/*=============== Venstre ============*/
.lefty
{
width:150px;
height:90%;
float:left;
margin:5px 5px 5px 5px;
padding:5px 5px 5px 5px;
}
/*=============== Indhold1 ============*/
.content
{
background-color: inherit;
margin:5px 220px 5px 170px;
padding:0px 5px 5px -3em;
float:none;
}
/*=============== Footer ============*/
.footer
{
width:98%;
border-top: 2px solid #242F24;
background-color: #F5F5F5;
text-align: center;
position: relative;
bottom:0;
z-index: 10;
height: 3em;
margin: auto;
</style>
<body>
<div class="container">
<div class="lefty">
Left
</div>
<div class="commercial">
Right
</div>
<div class="content">
Indhold<br>og hvad så hvis vi putter en masse ekstra indhold på?<br>og hvad så hvis vi putter en masse ekstra indhold på?<br>og hvad så hvis vi putter en masse ekstra indhold på?<br>og hvad så hvis vi putter en masse ekstra indhold på?<br>og hvad så hvis vi putter en masse ekstra indhold på?<br>og hvad så hvis vi putter en masse ekstra indhold på?<br>og hvad så hvis vi putter en masse ekstra indhold på?<br>
</div><!—End Content—>
<div class="footer">
Footer
</div>
</div><!—End Container—>
</body>
</html>