[CSS] padding 1% is meer dan 1% - Softwareontwikkeling

donderdag 2 december 2004 19:23

Acties:

Topicstarter

Als ik een <div> met height: 100% en width: 100% een padding: 1% geef, dan gebeurd het volgende:

De div wordt groter dan 100%. Wat je zou verwachten is dat je 2% van zowel de width als de height afhaalt.

Dus dat je width: 98% en height: 98% moet gebruiken voor de <div> als je 1% padding wilt.
Voor de breedte gaat dit op, maar voor de hoogte niet, Ik moet height: 96% gebruiken om het effect van 1% padding op te heffen!

Kan iemand mij vertellen wat ik hier over het hoofd zie?

code:

html, body{
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    border: 0px;
    background-color:#00CCFF;
    overflow:hidden;
}
    
#viewport {
    height: 96%;
    width: 98%;
    border: 0px;
    background-color: #999999;
    margin-top: 1%;
    margin-right: 1%;
    margin-bottom: 1%;
    margin-left: 1%;
    }

#container {
    height: 100%;
    width: 100%;
    background-color: #009966;
    margin: 0px;
    padding: 0px;
    border: 0px;
}

<body>
<div id="viewport">
 <div id="container">
 </div>
</div>
</body>

Ik blijf er iig vrij nuchter onder....

donderdag 2 december 2004 19:26

Acties:

Verwijderd

Kan iemand mij vertellen wat ik hier over het hoofd zie?

Misschien het principe van het box model?

donderdag 2 december 2004 19:27

Acties:

Verwijderd

Boxmodel en browser zijn allicht van belang. Misschien kan je daar wat meer informatie over geven?

donderdag 2 december 2004 19:30

Acties:

Woudloper

« - _ - »

Dit is een typische Box model vraag. Mocht je nog wat willen lezen over het boxmodel dan kan je de bovenstaande link gebruiken of de link naar de W&G FAQ (working draft welteverstaan).

donderdag 2 december 2004 19:34

Acties:

maartenvdv737

Topicstarter

Ik test in zowel IE 6 als Firefox 1.0

Uiteraard ken ik het box model, weet ik wat padding, margin, border e.d. doet met de width en height. Zoals jullie kunnen lezen in de probleem omschrijving is hier rekening mee gehouden. Toch doet het fenomeen zich voor. Om nou te gaan roepen dat het een bug is gaat me te ver, maar na een aantal dagen zoeken en uitproberen ben ik ondertussen toe aan een oplossing.

Ik blijf er iig vrij nuchter onder....

donderdag 2 december 2004 19:39

Acties:

Verwijderd

Graag een online voorbeeld.

donderdag 2 december 2004 20:00

Acties:

maartenvdv737

Topicstarter

De versie waar ik padding 1% gebruik, en dus van de height en width 2% aftrek:

http://www.ai.rug.nl/~mjvdveen/test6.html

Merk op dat onderaan minder ruimte is dan bovenaan.

De versie waar ik padding 1% gebruik, en van de width 2% aftrek en van de height 4%:

http://www.ai.rug.nl/~mjvdveen/test5.html

Merk op dat de ruimte langs de randen nu ongeveer even groot is.

Ik blijf er iig vrij nuchter onder....

donderdag 2 december 2004 20:58

Acties:

Verwijderd

Ah, was te verwachten. Lees je is wat over "margin collapsing". Bijvoorbeeld Uncollapsing Margins van Eric A. Meyer.

vrijdag 3 december 2004 00:21

Acties:

crisp

Devver

Pixelated

Bedenk trouwens dat bij het werken met procenten je ook altijd nog rare dingen kan krijgen door afrondingen.

Intentionally left blank

vrijdag 3 december 2004 09:47

Acties:

maartenvdv737

Topicstarter

crisp schreef op vrijdag 03 december 2004 @ 00:21:
Bedenk trouwens dat bij het werken met procenten je ook altijd nog rare dingen kan krijgen door afrondingen.

Dat had ik me ook al bedacht, maar dat scheelt nooit 100%, zoals in dit geval.

Er zijn weinig andere manieren om een pagina volledig schaalbaar te maken, zonder met percentages te werken toch?

Ik blijf er iig vrij nuchter onder....

vrijdag 3 december 2004 11:45

Acties:

Verwijderd

Mwaj, ik werk ook niet met percentages en mijn pagina is redelijk schaalbaar.

vrijdag 3 december 2004 11:46

Acties:

maartenvdv737

Topicstarter

Verwijderd schreef op vrijdag 03 december 2004 @ 11:45:
Mwaj, ik werk ook niet met percentages en mijn pagina is redelijk schaalbaar.

Hoe zorg je dan dat je de maximale hoogte en breedte voor verschillende resoluties gebruikt?

Ik blijf er iig vrij nuchter onder....

vrijdag 3 december 2004 11:48

Acties:

Verwijderd

Breedte gebeurt automatisch, geef een DIV maar is een achtergrondkleurtje (of een BODY element of een HTML element, of wat je dan ook stijlt met display:block). Als je de canvas een kleurtje hebt gegeven heb je daar ook geen last meer van. Daarnaast heb je nog diverse truucjes zoals background-images laten repeaten etc.

vrijdag 3 december 2004 17:18

Acties:

maartenvdv737

Topicstarter

Goed, ik heb het stuk over uncollapsing margins gelezen. Opzich duidelijk.

Heb het toegepast op mijn eigen probleem, maar helaas. Geen verbetering.

Een simpel voorbeeld is te zien op:

http://www.ai.rug.nl/~mjvdveen/test9.html

Het probleem is dus dat:

code:

1
2
3

    width: 98%;
    height: 98%;
    padding: 1%;

Niet op tellen tot 100% in de layout en er dus scrollbars komen.

[ Voor 7% gewijzigd door maartenvdv737 op 03-12-2004 17:19 ]

Ik blijf er iig vrij nuchter onder....

vrijdag 3 december 2004 17:27

Acties:

Verwijderd

als je in dat voorbeeld je border uitzet (die wordt er ook bij opgetelt nl) en de body een margin 0 geeft is het opgelost

vrijdag 3 december 2004 17:46

Acties:

maartenvdv737

Topicstarter

Bij mij werkt het dan nog steeds niet hoor.

code:

html {
    background-color:#009966;
    height: 100%;
    width: 100%;
    margin: 0px;
}

body{
    width: 98%;
    height: 98%;
    padding: 1%;
    margin: 0px;
    background-color:#00CCFF;
}

http://www.ai.rug.nl/~mjvdveen/test10.html

Ik blijf er iig vrij nuchter onder....

vrijdag 3 december 2004 17:51

Acties:

Verwijderd

woei, vaagheid

in firefox werkt dit gewoon
in IE bij smalle vensters (<800 px) ook, hoe breder het venster, hoe langer de pagina wordt, bij hele smalle vensters houd ik ruimte over

vrijdag 3 december 2004 17:53

Acties:

maartenvdv737

Topicstarter

Ik heb net ook even geresized, op sommige breedte hoogte verhoudingen verdwijnen de scroll balken idd. Bij mij werkt het onder firefox niet goed..

Ik blijf er iig vrij nuchter onder....

vrijdag 3 december 2004 22:04

Acties:

Verwijderd

In Firefox werkt het scrollwiel nog wel hier. Het komt omdat 100% + 1px + 1px meer is dan 100%.