Div toond 100%+ op pagina

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Harry H Arends

Harry H Arends

16/08/2017 10:03:21
Quote Anchor link
Ik wil dat een div het gehele scherm bedekt.
Dan denk je zet hoogte en breedte op 100%
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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 */
}

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

PHP hulp

18/12/2024 15:14:04
 
- SanThe -

- SanThe -

16/08/2017 10:08:31
Quote Anchor link
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
#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

Harry H Arends

16/08/2017 10:28:14
Quote Anchor link
als ik de border weer laat zien en hoogte/breedye verlaag naar 99% staat het scherm niet in het midden(gecentreerd
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
#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

Thomas van den Heuvel

16/08/2017 11:09:26
Quote Anchor link
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

Harry H Arends

16/08/2017 14:39:36
Quote Anchor link
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 -

- SanThe -

16/08/2017 14:51:41
Quote Anchor link
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

Harry H Arends

16/08/2017 17:21:36
Quote Anchor link
Nooit geweten dat je met CSS ook kunt rekenen. Nu nog een div vast onder aan de pagina. Is de volgende uitdaging. Bedankt.
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.