Div inni div med 100% - Innerste DIV'en overlapper

JustSubby · 25. februar 2008

Hei,

Jeg sliter litt med CSS. Holder på å lage en side som skal ha 6 bokser på seg. Hver boks skal ha en banner-tekst og så innhold.

Hver av boksene skal være på 30% av skjermstørrelsen (ønsker å bruke prosent, slik at den blir pen på både store og små skjermer). Banner-teksen skal være 25px i høyde, mens 'boksinnhold'-tagen skal fylle ut resten. Blir innholdet i boksen mer enn det som er plass skal det blir en scrollbar(overflow: auto) i DIV-tagen.

Det som skjer nå er at den 'bokinnhold'-tagen går litt over 'boks'-tagen. Noen som har noen idee om å "låse" 'boksinnhold'-tagen slik at den ikke går over 'boks'-tagen. Spesielt stygg når scroll-baren kommer og går over hovedboksen. Jeg skjønner at det er height:100% i boksinnhold som forusaker det, men er det mulig å gjøre at den fyller foreldre-boksen uten å gå utafor. Noen smart CSS-kode?

mvh

Jo

Har satt på "border" på css-koden, slik at man kan se problemet kjapt.

<style type="text/css"> 
body, html { 
margin:0; 
padding:0; 
height:100%;
} 

.boks{
height: 30%;
width: 45%;
border: 1px solid red;
}

.boksbanner {
height: 25px;
border: 1px solid blue;
text-align: center;
}

.boksinnhold{
height: 100%;
border: 1px solid green;
overflow: auto;
}

</style>
</head>

<body>
<div class="boks">
<div class="boksbanner">Banner</div>
<div class="boksinnhold">innhold</div>
</div>
</body>
</html>

Endret 25. februar 2008 av JustSubby

Haraldson · 26. februar 2008

Så alt vi får er en ikke-komplett dummykode?

Help me help you.

semafor · 26. februar 2008

Gjør det enkelt: Bytt ut 25px med en variabel verdi.

men..

Det er det beste. Du sier det selv, at siden skal rendres fint på små og store skjermer.

JustSubby · 26. februar 2008

Skulle kanskje ha forklart litt bedre og gitt med info... Håper dette gir dere mere innput for å hjelpe meg med en løsning.

semafor; jeg ønsker at banneren/topplinja er statisk, derfor er det satt fast height, mens innhold-div'en skal vokse/krympe alt etter skjermoppløsningen.

Hvordan det ser ut med border. Som man ser går den "blå" DIV'en utafor. Er det mulig å låse den slik at den ikke går utafor, og at den følger foreldre divens størrelse?

Her er hvordan den blir når for mye tekst i DIV'en og overflow: auto.

Haraldson · 26. februar 2008

.boksbanner er altså ikke fanen i seg selv, men 'Legg til bilde - DIV boksbanner'?

I tilfelle er dette lett. position: relative; på .boks, position: absolute; padding-top: 25px; left: 0; top: 0; på .boksinnhold.

o0 · 26. februar 2008

Hei,
Jeg sliter litt med CSS. Holder på å lage en side som skal ha 6 bokser på seg. Hver boks skal ha en banner-tekst og så innhold.

Hver av boksene skal være på 30% av skjermstørrelsen (ønsker å bruke prosent, slik at den blir pen på både store og små skjermer). Banner-teksen skal være 25px i høyde, mens 'boksinnhold'-tagen skal fylle ut resten. Blir innholdet i boksen mer enn det som er plass skal det blir en scrollbar(overflow: auto) i DIV-tagen.

Det som skjer nå er at den 'bokinnhold'-tagen går litt over 'boks'-tagen. Noen som har noen idee om å "låse" 'boksinnhold'-tagen slik at den ikke går over 'boks'-tagen. Spesielt stygg når scroll-baren kommer og går over hovedboksen. Jeg skjønner at det er height:100% i boksinnhold som forusaker det, men er det mulig å gjøre at den fyller foreldre-boksen uten å gå utafor. Noen smart CSS-kode?

mvh

Jo

Har satt på "border" på css-koden, slik at man kan se problemet kjapt.

ok sjekk da:

.boksinnhold height: 100%

.boksbanner height: 25px

100% + 25px = mer enn 100%, derfor stikker den utenfor nede.

er relativt ny til css, men dette virket hvertfall i min browser:

.boksinnhold{
height: 100% - 25px;
border: 1px solid green;
overflow: auto;
}

Logg inn

Div inni div med 100% - Innerste DIV'en overlapper

Anbefalte innlegg

JustSubby

Videoannonse

Haraldson

semafor

JustSubby

Haraldson

o0

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer