2 keer 100% height

dafje95 · 13 feb 2013

Hallo,

Voor een vriend ben ik een website aan het maken. Deze website bestaat uit 2 elementen, een introfilmpje, en als je omlaag scrolt de pagina.
De bedoeling is dat het filmpje 100% van de hoogte van je scherm word, deze moet zicht dus aanpassen aan verschillende resoluties. Daaronder moet de content komen, die dan ook weer 100% van je scherm word, waardoor je dus niet onnodig ver hoeft te scrollen, maar het filmpje niet meer ziet.
Dan heb ik daarna nog een script nodig dat de breedte en hoogte van je scherm meet, en deze vervolgens door 2 deelt, om het de content in de midden te krijgen. Ik zal hieronder even laten zien wat ik wil bereiken: stel het scherm is 1000px hoog, dan moet het filmpje dus 1000px hoog worden, en de div eronder ook. In deze div met de content moet er dan weer een script zijn die deze pagina in de midden krijgt en moet ongeveer met dit stukje css samenwerken:

Code:

Position: relative;
top:50%;
margin-top:-500px;
left:50%;
margin-left:-500px;

Mocht je niet snappen wat ik bedoel, bekijk dan even het bijgevoegde schematische plaatje.

Welke oplossing is hiervoor?

csshunter · 13 feb 2013

Hoi dafje95,
Hier is een beginnetje:

HTML:

<body>
    <div id="topContainer">
	... filmpje
    </div>

    <div id="bottomContainer">
	... content
    </div>
</body>

met:

Code:

html {
	height: 100%;
	}
body {
	margin: 0;
	height: 100%;
	}
#topContainer,
#bottomContainer {
	height: 100%;
	width: 100%;
	}
#topContainer {
	background: #C0C0FF;
	}
#bottomContainer {
	background: #C0FFC0;
	}

Ik denk dat je ook in het bovenste deel wat javascript nodig hebt, dat afhankelijk is van de breedte/hoogte-verhouding van het filmpje (resp. de player). Als de hoogte 100% is, kan namelijk bij een smal scherm de breedte er niet meer op passen; bv. bij een rechtopstaand tablet.

Beginnen met de hoogte op 100% te zetten.
Javascript de schermhoogte laten opvragen en laten uitrekenen wat dan de bijbehorende player-breedte moet zijn.
Javascript de schermbreedte laten opvragen van het scherm van de bezoeker.
Als die kleiner is dan de nodige player-breedte, dan de player-breedte op 100% zetten, en de player-hoogte naar verhouding aanpassen.
Dat is dan het grootst haalbare player-formaat voor dat scherm.
Vervolgens kan je ook de hoogte van de topContainer op die hoogte zetten, anders ontstaat er een gat tussen te player en de content.

Met vriendelijke groet,
CSShunter

2 keer 100% height

dafje95

Gebruiker

csshunter

Meubilair

Nieuwste berichten

Wij waarderen jouw privacy