Danny's -Smallweb- Blog: HTML layout met Visual Studio 2005 DocType

Wanneer je in Visual Studio 2005 een tabel met een hoogte van 100% (volledige pagina hoogte) wil gebruiken, kom je in de problemen. De hoogte van 100% lukt nog wel, maar daarna de hoogte van de rijen instellen geeft problemen. Dit heeft te maken met het DocType wat Visual Studio automatisch aan een webpagina toevoegd:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">.
In Visual Studio 2003 heb je dit probleem niet, omdat daar gebruik van het DocType <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> wordt gemaakt. Zie http://www.smallweb.nl/ voor een voorbeeld hiervan.

De oplossing om dit toch op een juiste manier voor elkaar te krijgen is om gebruik te maken van DIV's. Hieronder een oplossingsvoorbeeld:

<!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>
<style>
html, body
{
margin: 0;
padding: 0;
height: 100%;
max-height: 100%;
overflow: hidden;
}
.Content
{
height: 100%;
max-height: 100%;
overflow: scroll;
}
.Header
{
position: absolute;
top: 0px;
height: 40px;
right: 18px;
background-color: whitesmoke;
margin: 0px;
width: 100%;
}
.Footer
{
position: absolute;
bottom: -1px;
right: 18px;
height: 30px;
background-color: whitesmoke;
width: 100%;
margin: 0px;
}
.HeadFootPadding
{
display: block;
float: left;
width: 18px;
height: 100%;
max-height: 100%;
}
.ContentPadding
{
display: block;
height: 40px
}
</style>
</head>

<body>

<div class=Header>
<div class=HeadFootPadding></div>
<b>Header</b>
</div>
<div class=Content>
<div class=ContentPadding></div>

Dit is de content van de pagina...<br><br>
Dit is de content van de pagina...<br><br>
Dit is de content van de pagina...<br><br>
Dit is de content van de pagina...<br><br>
Dit is de content van de pagina...<br><br>
Dit is de content van de pagina...<br><br>
Dit is de content van de pagina...<br><br>
Dit is de content van de pagina...<br><br>
Dit is de content van de pagina...<br><br>
Dit is de content van de pagina...<br><br>
Dit is de content van de pagina...<br><br>
Dit is de content van de pagina...<br><br>
Dit is de content van de pagina...<br><br>
Dit is de content van de pagina...<br><br>
Dit is de content van de pagina...<br><br>
Dit is de content van de pagina...<br><br>
Dit is de content van de pagina...<br><br>
Dit is de content van de pagina...<br><br>
Dit is de content van de pagina...<br><br>
Dit is de content van de pagina...<br><br>
Dit is de content van de pagina...<br><br>
Dit is de content van de pagina...<br><br>
Dit is de content van de pagina...<br><br>
Dit is de content van de pagina...<br><br>
EINDE
<div class=ContentPadding></div>
</div>
<div class=Footer>
<div class=HeadFootPadding></div>
<b>Footer</b>
</div>

</body>
</html>

Het voordeel van de HTML in dit voorbeeld is dat de daadwerkelijke content gaat scrollen binnen de DIV container, wanneer de content de hoogte van de DIV overschrijdt. Bij de meeste voorbeelden, zoals in de bronnen hieronder, functioneert het scrollen niet goed.

Bronnen:
http://www.xs4all.nl/~peterned/examples/csslayout1.html
http://css-discuss.incutio.com/?page=CssLayouts
http://www.webtoolkit.info/css-centered-layout.html
http://www.cssplay.co.uk/layouts/basics2.html