12 svar · 560 visningar · startad av oskob
Hejsan!
Är det inte så att padding ska göra en ram INNOM elementet? Så oberoende om paddingen är 10px eller 30px så ska elementet vara lika stort (förutsatt att elementet är tillräckligt stort för att 30 px padding ska få plats INNUTI det).
Jag har lagt en div med 100% height och padding-top: 10px. Varför kommer det då fram en scroll?
EDIT:
Löste problemet med att ta bort position: absolute, men nuhar jag nytt problem.
Om sidan blir så stor så att man måste scrolla så slutar bakgrudnen att loopa efter första sidan. Hur får man den att sträcka sig ända ner hur lång sidan än är?
Tack på förhand!
Har kommit lite längre nu.
Det som dummar är min-height.
Eftersom explorer inte pallar min-heigjt så måste jag slänga in height: 100%. men då blir det fel i firefox.
Finns det något sätt att slänga in lite "css-hacks" som bara tolkas av internet explorer?
Skulle kunna gå med php men det känns bara klantigt.
Hmm..
Padding ligger visserligen inuti höjden om du kör webbläsaren i "Quirks mode", men den skall normalt ligga utanför höjdvärdet om du kodar sidan enligt "alla konstens regler"... Gissar att du kör din sida med en <!DOCTYPE som ställer in webbläsaren i "standards mode" - vilket (helt korrekt) ger dig en höjd av av webbläsarfönstrets höjd + 10pixel (och därmed också rullningslister) om din div ligger "ytterst".
"hack" för 100% höjd om du kör med <div id="hundraprocentaren">:
body, html {margin:0;padding:0;height:100%} /* grundinställning */
#hundraprocentaren {min-height: 100%}
* html #hundraprocentaren {height: 100%}
Sök lite i forumet så hittar du fler varianter, frågan har varit uppe en del på siståne ;)
Vad gör * ?
Matchar alla element... Så den raden borde aldrig gälla just i detta exempel ;)
MSIE matchar alltså (felaktigt och som enda webbläsare) regeln som säger "alla html-element som ligger i något annat element" (sök lite på "star html hack" eller "tan hack" på google ;) )
Nu är det bara att hoppas på att MS implementerar min-height i IE7. :)
zcorpan skrev:
Nu är det bara att hoppas på att MS implementerar min-height i IE7. :)
Om man ändå hade hopp kvar för IE ;)
HEJ!
Är
body, html {margin:0;padding:0;height:100%} /* grundinställning */
#hundraprocentaren {min-height: 100%}
* html #hundraprocentaren {height: 100%}
samma som
* {margin:0;padding:0;}
html{height:100%;}
body{height:100%;}
#hundraprocentaren{
min-height:100%;
}
kombinerat med
#content_def{height:100%}
med [if IE]-kod på sidan.
Dvs, blir det rätt att dela upp stjärnan, html och lagret?
De två andra tycker jag är rätt, även om jag har med * i min första raden?
Har delat html och body eftersom jag har font i body också.
Hmm...
I stort sett...
Skillnaden blir att första "stjärnregeln" gör att margin och padding sätts till noll även för #hundraprocentaren i ditt exempel...
Annars är det samma sak (förutsätter iofs att du menade att #hundraprocentaren och #content_def är samma id ;) ).
HEJ!
jarvklo skrev:
...
Annars är det samma sak (förutsätter iofs att du menade att #hundraprocentaren och #content_def är samma id ;) ).
Missade ändra det, ja!
zcorpan skrev:
Nu är det bara att hoppas på att MS implementerar min-height i IE7. :)
För Internet Explorers del skulle detta innebära ett synonym för height :e
Troxy skrev:
För Internet Explorers del skulle detta innebära ett synonym för height :e
Sant, men om de implementerar 'min-height' kanske de rättar till riktiga 'height' också! Man kan ju alltid hoppas... ;)