Div toond 100%+ op pagina
Dan denk je zet hoogte en breedte op 100%
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
#wrapper,
#rcorners2px {
margin:0 auto;
border-radius: 25px;
border: 2px solid #006400;
padding: 5px;
width: 100%;
height: 100%;
position: fixed;
top: 10;
left: 10;
z-index: 100; /* Just to keep it at the very top */
}
#rcorners2px {
margin:0 auto;
border-radius: 25px;
border: 2px solid #006400;
padding: 5px;
width: 100%;
height: 100%;
position: fixed;
top: 10;
left: 10;
z-index: 100; /* Just to keep it at the very top */
}
Maar uiteindelijk lijkt het meer op 125%, uitloop naar rechts en onder.
De vraag is nu wat gaat er fout en hoe dit op te lossen??
als ik de border weer laat zien en hoogte/breedye verlaag naar 99% staat het scherm niet in het midden(gecentreerd
Als je iets volledig schermdekkend wilt hebben zul je dit moeten doen met width en height 100%, en verder helemaal niets. Geen margin, geen padding, geen border, geen offsets (left, top). De beste manier om dit laatste te garanderen is door alles expliciet op 0 te zetten.
Ik weet niet of je dit ook voor de algemene opbouw van je webpagina wilt hebben. Dus als wrapper van je standaard website layout.
Waarvoor wil je deze div precies gebruiken? Wat is de toepassing hiervan?
Thomas van den Heuvel op 16/08/2017 11:09:26:
Ik weet niet of je dit ook voor de algemene opbouw van je webpagina wilt hebben. Dus als wrapper van je standaard website layout.
Waarvoor wil je deze div precies gebruiken? Wat is de toepassing hiervan?
Waarvoor wil je deze div precies gebruiken? Wat is de toepassing hiervan?
Hier staat mijn testpagina.
Uiteindelijk dient bovenin een menu te komen(over op 100% scherm breedte) en onderin een footer.
Daartussen twee div's naast elkaar(50-50) en daaronder een deel op ongeveer scherm breedte
Dan laat je de hoogte en breedte berekenen: 100% - 2xborder - margin.
Dat wordt dus 100% - 4px - 10px.
width: calc(100% - 14px);
height: calc(100% - 14px);
Nooit geweten dat je met CSS ook kunt rekenen. Nu nog een div vast onder aan de pagina. Is de volgende uitdaging. Bedankt.