Nieuw lid |
|
Hey,
Ik wil graag dat de footer onderaan de pagina komt te staan en mee beweegt wanneer de content langer is dan de viewport van de browser. Dus wanneer de tekst korter is dan de viewport dat dan de footer onderaan de viewport komt te staan en als de tekst langer is dan de viewport dat ie dan mee gaat met de tekst.
Nu heb ik onderstaande code en deze werkt perfect in IE, maar in Firefox komt de footer niet onderaan de viewport te staan als de tekst korter is dan de viewport (de footer beweegt wel mee met de content).
Weet iemand wat ik fout doe?
<html>
<title>
<style type="text/css">
html {
width: 100%;
height: 100%;
}
html>body, html>body #holder {
height: auto;
}
body {
position: relative;
min-height: 100%;
margin: 0;
padding: 0;
background: url(images/achtergrond2.jpg) repeat-y 50% 0;
}
#holder {
min-height: 100%;
width: 748px;
position: relative;
margin: 0 auto;
height: 100%;
}
#content {
margin-left: 191px;
margin-top: 60px;
padding-bottom: 3em;
height: auto;
background: url(images/index_12.jpg) no-repeat;
background-position: top right;
}
#footer {
clear: both;
width: 748px;
height: 20px;
background-color: gray;
position: absolute;
bottom: 0;
left: 0;
border: none;
}
#nav p, #content p {
margin: 0px 10px 10px 10px;
font-family: Verdana, Century Gothic, Arial;
font-size: 10px;
color: #000000;
line-height: 155%;
width: 365px;
}
#nav ul {margin-left: 0; padding-left: 0;}
#nav li {margin: 0 1em 0 2em;}
</style>
<!--[if lt IE 7]>
<style type="text/css"> body { height: 100%; } </style>
<![endif]-->
</head>
<body>
<div id="holder">
<div id="header">
</div>
<div id="navigatie">
</div>
<div id="home">
</div>
<div id="informatie">
</div>
<div id="diensten">
</div>
<div id="portfolio">
</div>
<div id="contact">
</div>
<div id="balkonder">
</div>
<div id="nav">
<div id="balkonder2">
</div>
<div id="klantenlogin">
</div>
<div id="headlines">
</div>
</div>
<div id="balkonder3">
</div>
<div id="content">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam convallis est sed sapien. Nunc viverra dolor. Quisque luctus pulvinar arcu. Phasellus condimentum lorem nec purus. Curabitur sagittis, nisl nec ullamcorper tempor, enim arcu venenatis tellus, id accumsan magna lacus sed sem. Nulla facilisi. Suspendisse et erat. Suspendisse potenti. Phasellus lacus. Praesent est. Quisque dolor massa, sagittis sit amet, porttitor et, semper at, lacus. Sed facilisis arcu venenatis nisi aliquam laoreet. Quisque euismod dolor eu urna. Cras varius libero vitae nulla. Sed vitae elit vel tellus ullamcorper consectetuer. Vestibulum vitae purus at turpis auctor rutrum.
</p>
</div>
<div id="footer">
</div>
</div>
</body>
</html>
<html> <title> <style type="text/css"> html { width: 100%; height: 100%; } html>body, html>body #holder { height: auto; } body { position: relative; min-height: 100%; margin: 0; padding: 0; background: url(images/achtergrond2.jpg) repeat-y 50% 0; } #holder { min-height: 100%; width: 748px; position: relative; margin: 0 auto; height: 100%; } #content { margin-left: 191px; margin-top: 60px; padding-bottom: 3em; height: auto; background: url(images/index_12.jpg) no-repeat; background-position: top right; } #footer { clear: both; width: 748px; height: 20px; background-color: gray; position: absolute; bottom: 0; left: 0; border: none; } #nav p, #content p { margin: 0px 10px 10px 10px; font-family: Verdana, Century Gothic, Arial; font-size: 10px; color: #000000; line-height: 155%; width: 365px; } #nav ul {margin-left: 0; padding-left: 0;} #nav li {margin: 0 1em 0 2em;} </style> <!--[if lt IE 7]> <style type="text/css"> body { height: 100%; } </style> <![endif]--> </head> <body> <div id="holder"> <div id="header"> </div> <div id="navigatie"> </div> <div id="home"> </div> <div id="informatie"> </div> <div id="diensten"> </div> <div id="portfolio"> </div> <div id="contact"> </div> <div id="balkonder"> </div> <div id="nav"> <div id="balkonder2"> </div> <div id="klantenlogin"> </div> <div id="headlines"> </div> </div> <div id="balkonder3"> </div> <div id="content"> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam convallis est sed sapien. Nunc viverra dolor. Quisque luctus pulvinar arcu. Phasellus condimentum lorem nec purus. Curabitur sagittis, nisl nec ullamcorper tempor, enim arcu venenatis tellus, id accumsan magna lacus sed sem. Nulla facilisi. Suspendisse et erat. Suspendisse potenti. Phasellus lacus. Praesent est. Quisque dolor massa, sagittis sit amet, porttitor et, semper at, lacus. Sed facilisis arcu venenatis nisi aliquam laoreet. Quisque euismod dolor eu urna. Cras varius libero vitae nulla. Sed vitae elit vel tellus ullamcorper consectetuer. Vestibulum vitae purus at turpis auctor rutrum. </p> </div> <div id="footer"> </div> </div> </body> </html>
|