website div height in %

Status
Niet open voor verdere reacties.
A

andriesf

Gebruiker
Lid geworden
16 aug 2008
Berichten
216
hee allemaal,

ik wil graag mijn in mijn nieuwe website gebruik maken van een hoogte in procenten.
Alleen blijkt nu dat height in % alleen werkt wanneer je er een container omheen hebt waarin je een div in pixels hebt. Is er misschien een mogelijkheid om toch met procenten te werken zonder eromheen een container in pixels, want ik wil graag dat hij zich aanpast aan de hoogte van het scherm waarop de website getoond wordt.

Is er iemand die weet hoe ik dit kan oplossen?

MVG,
Andries
 
JavaScript! Dit scriptje werkt ook als je je browser resized.

Misschien heb je al iets aan dit. Het maakt het element met het ID ResizeElement net zo groot als de browser. Ik heb het getest in de laatste versies van FireFox, IE, Opera, Chrome en Safari.
[JS]
var winW = null, winH = null;

function getSize()
{
winW = null;
winH = null;
if (winW == null || winH == null) {
winW = window.innerWidth;
winH = window.innerHeight;
}
if (winW == null || winH == null) {
winW = document.documentElement.clientWidth;
winH = document.documentElement.clientHeight;
}
resize();
}

getSize();

window.onresize = getSize;

function resize()
{
mainResize();
}

function mainResize()
{
document.getElementById("ResizeElement").style.height = winH +"px";
document.getElementById("ResizeElement").style.width = winW +"px";
}

[/JS]
 
Alleen blijkt nu dat height in % alleen werkt wanneer je er een container omheen hebt waarin je een div in pixels hebt.
Klik om te vergroten...
Leugens! (:p) Je kan echter pas met % werken als de omringende containers OOK een waarde hebben. In het geval van een enkele div in de <body> is dit body. Probeer zoiets eens:
HTML: 
<html>

<head>
<style>
body
{
   height: 100%;
}

div
{
   border: 1px dotted #f06;
   height: 50%;
}

</style>

<body>


<div>
</div>


</body>
</html>

Overgens is Javascript gebruiken om je layout te fixen niet het strakste plan ooit.

Trouwens, wel aardig scriptje. Echter, waarom de dubbele functie-aanroep? (resize() -> mainResize())
 
bedankt voor de reacties :D

ik zal beide "scripts" eens bekijken om te kijken wat ik er mee kan ;)

MVG,
Andries
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan