content moet over de gehele lengte doorlopen tot aan de footer.

marc 05 · 2 jul 2012

Hallo,

Mijn bedoeling is dat het bovenste gedeelte van de body groen blijft.
Verder wil ik het content in de witte kleur hebben doorlopen tot aan de footer of beter gezegd van achter de footer vandaan.
Dit ongeacht de lengte van de inhoud.

Nu heb ik dit geprobeerd door de wrapper een hoogte te geven van 1000px
en het content een hoogte van 90%.

Is dit correct of wat kan ik eraan veranderen zonder de layout compleet aan te passen.

Als het mogelijk is wil ik ook binnen het content een <div> links en <div> rechts, dus naarst mekaar plaatsen.
Dit had ik geprobeerd door beide een float left mee te geven. Maar wanneer ik de </div> aflsuit van links en rechts alvorens het content gesloten te hebben
gaat het verkeerd.
Met tekst gaat het ook door bv. het plaatje wat ernaast moet komen een float left dan kan de tekst er mooi naast.
Probeer ik dit met een iframe en daarnaast een formulier dan gaat dit niet goed.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="nl">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow">
<title>fixed footer (A)</title>

<style type="text/css">
html {
background: black;
height: 100%; /* ook referentie voor body-hoogte */
padding-bottom: 1px; /* voor FF en Chrome */
}

body {
width: 990px;
min-height: 100%; /* show body-background voor korte pagina */
margin : 0 auto;
padding: 0;
background: green;
color : black;
font-family: Helvetica, sans-serif;
}

#menu {
width: 100%;
height: 40px;
background: #C0FFFF;
color: red;
padding: 0px;
margin: 0px;
}

#wrapper{
position : absolute;
width: 990px;
height: 1000px;
/* height:1000px; */
background: blue;
color: yellow;
top: 85px;
border: dotted fuchsia;
border-width: 0 0 0 2px;
}

#content{
padding: 10px 10px 2.5em 20px; /* padding-bottom aangepast aan hoogte #footer */
background: white;
color: black;
height: 90%;
}

#footer{
position: fixed;
bottom: 0px;
height: 1.5em; /* afhankelijk van inhoud */
width: 990px;
background: #C0C0C0;
color: black;
}

</style>

</head>

<body>body

<div id="wrapper">
<div id="menu">
Hierin staat mijn menu
</div>
<div id="content">
Hier staat mijn content
<h1>fixed footer</h1>
<a href="fixed-footer-B.htm">meer content</a>

</div>
</div>

<div class="style1" id="footer">
Footer
</div>

</body>
</html>

Lucius1992 · 10 jul 2012

[XML]#content {
margin: 0 auto;
padding-top: 20px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 20px;
}

#footer {
margin: 0 auto;
padding-top: 10px;
padding-bottom: 20px;
}
[/XML]

Wat gebeurd er als je dit erbij toevoegd?

marc 05 · 11 jul 2012

ik weet het niet niet maar ik had de padding botom liever met een em, moet ik de height van 90 % bij content weglaten?

content moet over de gehele lengte doorlopen tot aan de footer.

marc 05

Gebruiker

Lucius1992

Gebruiker

marc 05

Gebruiker

Nieuwste berichten

Wij waarderen jouw privacy