Div toond 100%+ op pagina

Door Harry H Arends op 16-08-2017 10:03

1.066 views

Ik wil dat een div het gehele scherm bedekt.
Dan denk je zet hoogte en breedte op 100%

 #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 */
}

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??

- SanThe -

16-08-2017 10:08


#wrapper,
 #rcorners2px {
    margin:0px;
    padding: 0px;
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 100; /* Just to keep it at the very top */
}

Harry H Arends

16-08-2017 10:28

als ik de border weer laat zien en hoogte/breedye verlaag naar 99% staat het scherm niet in het midden(gecentreerd

#wrapper,
 #rcorners2px {
    border-radius: 25px;
    border: 2px solid #006400;
    margin:10px;
    padding: 0px;
    width: 99%;
    height: 99%;
    position: fixed;
    z-index: 100; /* Just to keep it at the very top */
}

Thomas van den Heuvel

16-08-2017 11:09

99% zal veschillende dingen betekenen op verschillende schermen.

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?

Harry H Arends

16-08-2017 14:39

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?

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

- SanThe -

16-08-2017 14:51

De border is 2px en margin is 10px.
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);

Harry H Arends

16-08-2017 17:21

Nooit geweten dat je met CSS ook kunt rekenen. Nu nog een div vast onder aan de pagina. Is de volgende uitdaging. Bedankt.

Reageren

Inloggen om te reageren