---

Hej.

Jeg har (f.eks.) følgende css:

div {
width: 100%;
height: 100%;
padding: 5.0em;
}

Det jeg gerne vil opnå er at boksen fylder 100% i bredden og højden, men
samtidig med en padding. Desværre er width og height jo angivelse af den
indre boks ('content'), hvorfor den bliver hele 10.0em større i hver
retning. Kan man komme uden om det og hvordan?

Jeg ved der findes et BoxModelHack, men det hjælper jo netop kun på det
omvendte problem - at man i IE5 gerne vil have mulighed for korrekt
angivelse af width og height. Her vil jeg i stedet gerne have at alle
browsere læser width og height som bredden og højden af den ydre boks, i det
mindste medregnet padding. Om den tager border og margin med er i princippet
et fedt.

Håber i forstår problemet og evt. har en idé til en løsning. På forhånd tak!

Mvh.
Bjarke

---

Bjarke Walling Petersen wrote:
> div {
> width: 100%;
> height: 100%;
> padding: 5.0em;
> }
>
> Det jeg gerne vil opnå er at boksen fylder 100% i bredden og højden, men
> samtidig med en padding. Desværre er width og height jo angivelse af den
> indre boks ('content'), hvorfor den bliver hele 10.0em større i hver
> retning. Kan man komme uden om det og hvordan?

Hej Bjarke

I standard-mode kan du på dit div element bruge CSS-egenskaben
"box-sizing" sat til "border-box". Det virker i Opera 7+, IE5(Mac).
Og i Mozilla kan du bruge "-moz-box-sizing" også sat til "border-box".

Desværre virker det ikke i IE6. Men hvis du laver en XML-deklaration før
din standard-mode sættende DOCTYPE, kan du tvinge den i quirksmode. Men
så gælder den gamle box-model for hele/resten af siden.

Jeg kan ikke rigtig komme på andre måde det kan løses.

Men det kan være der er andre der har en løsning?


--
Martin Hintzmann Andersen
http://www.hintzmann.dk/

---

Martin Hintzmann Andersen <no@spam.please> skrev:
> I standard-mode kan du på dit div element bruge CSS-egenskaben
> "box-sizing" sat til "border-box". Det virker i Opera 7+, IE5(Mac).
> Og i Mozilla kan du bruge "-moz-box-sizing" også sat til "border-box".
[klip]

Det virker da nogenlunde, men jeg kan stadig ikke få helt det ønskede
resultat i Opera, selvom det da er tættere på nu.

Mvh.
Bjarke

---

Hej Bjarke


Bjarke Walling Petersen wrote:
> div {
> width: 100%;
> height: 100%;
> padding: 5.0em;
> }
>
> Det jeg gerne vil opnå er at boksen fylder 100% i bredden og højden, men
> samtidig med en padding. Desværre er width og height jo angivelse af den
> indre boks ('content'), hvorfor den bliver hele 10.0em større i hver
> retning. Kan man komme uden om det og hvordan?

Du kunne droppe padding på din div, og i stedet sætte 5.0em margin på
det indhold du har i div'en? Evt. Kunne du have en ydre div med 0
padding og 0 margin, og en indre div med 5em margin?

Noget andet er, at i bredden vil din div vel egentlig pr. default opføre
sig som du ønsker hvis du ikke angiver nogen specifik bredde, vil den
ikke? Hvis ikke width er angivet for et block-element, så er den default
sat til auto som jeg vil mene gør præcis som du ønsker.


Mvh. Stig
www.rockland.dk

---

Stig Nygaard <stig@nospamto-r-o-c-k-l-a-n-d.dk> skrev:
> Du kunne droppe padding på din div, og i stedet sætte 5.0em margin på det
> indhold du har i div'en? Evt. Kunne du have en ydre div med 0 padding og 0
> margin, og en indre div med 5em margin?

Ja, det har jeg også tænkt på - problemet er bare at indholdet også skal
være 100% i både højden og bredden og så virker det heller ikke at sætte
margin på. Se nedenfor.

> Noget andet er, at i bredden vil din div vel egentlig pr. default opføre
> sig som du ønsker hvis du ikke angiver nogen specifik bredde, vil den
> ikke? Hvis ikke width er angivet for et block-element, så er den default
> sat til auto som jeg vil mene gør præcis som du ønsker.

Ja, det er heller ikke noget problem med bredden - kun højden.

Det var selvfølgelig lidt dumt af mig ikke at skrive den reelle grund til at
jeg ønsker at lave den boks på 100%. Det er et forsøg på at løse ("hacke")
det problem jeg havde i en anden tråd "[CSS] Placering af boks". Her har jeg
følgende:

div#boks {
position: fixed;
top: 5.0em;
right: 0.5em;
bottom: 2.0em;
left: 10.0em;
border: thin solid #000;
}

Der findes et hack, der gør at IE også laver boksen position: fixed. Det
virker også fint nok. Det næste problem er blot at den ikke kan finde ud af
at have angivelse af både top, right, bottom og left. Nu har jeg dog næsten
løst problemet ved at gøre følgende:

div#ydre-boks {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 5.0em 0.5em 2.0em 10.0em;
box-sizing: border-box;
-moz-box-sizing: border-box;
}

div#indre-box {
width: 100%;
height: 100%;
border: thin solid #000;
box-sizing: border-box;
-moz-box-sizing: border-box;
}

Jeg har godt nok kun testet det i IE 6.0 (quirks-mode), Netscape 7.1,
Mozilla 1.7 og Opera 7.54. Det virker ikke helt som planlagt i Opera, men
ellers virker det glimrende! Det skulle vist også virke i IE 5.x og IE 5 til
Mac.

Men måske er der nogle bedre måde at gøre det på? Jeg har endnu ikke fundet
dem.

Mvh.
Bjarke