Gå til innhold

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

JustSubby

Anbefalte innlegg

JustSubby

JustSubby

Skrevet
Skrevet (endret)

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 av JustSubby
Lenke til kommentar

Videoannonse

Videoannonse
Annonse
JustSubby

JustSubby

Skrevet
  • Forfatter
Skrevet

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?

15zf69i.jpg

 

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

vyqzbs.jpg

Lenke til kommentar
o0

o0

Skrevet
Skrevet
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;
}

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
Gå til emneliste
×
×
  • Opprett ny...