hjelp til å lære div

Svendsen · 7. mars 2004

hvordan fixer jeg at en div blir 100% høy, slik at den går til bunnen?

prøvde med height=100%
#id {
height: 100%;
}
mener det er det jeg gjorde. Bruker enda DW til å kode css

[Jante] · 8. mars 2004

Mener at IE ikke liker height: 100%, legg til min-height: 100%; også du, så er du sikker.

haugsand · 8. mars 2004

IE liker height, men ikke min-height. Når en blokk har height: 100% vil den ta opp all tilgjengelig plass i "forfaderen" i høyden. Ved riktig bruk av doctype dekker ikke body og html mer av skjermen enn det er innhold, så det må legges til

html, body {height: 100%}

for at det ønskede resultatet skal komme.

[Jante] · 8. mars 2004

Ah så det var omvendt.

Svendsen · 8. mars 2004

it did it

har ikke behøvd det før?!

stianweb.com har det ikke

haugsand · 8. mars 2004

Om height: 100% trengs i html og body eller ikke, er også et spørsmål om en doctype er satt. Som lest i denne artikkelen, dekker body automatisk 100% i høyden når nettleseren går inn i "quirk-mode".

Svendsen · 8. mars 2004

Må bare si at jeg begynner å se fordelen i div kontra tabels :thumbs:

blir jo mye mindre kode

har og klart å validere den :thumbup:

men har nok et spm til dere som kan det *smiske mode* hehe

når jeg setter to div til 100% samt setter height til 100% i html og body så blir de lengere enn hele siden.

kan si at det er to høyder med div over de som tilsvarer 124px har det noe å si?

PT · 8. mars 2004

når jeg setter to div til 100% samt setter height til 100% i html og body så blir de lengere enn hele siden.
kan si at det er to høyder med div over de som tilsvarer 124px har det noe å si?

Trodde ikke at det skulle ha noe å si, men hvis siden blir 124px for høy, så er det nok slik...

Svendsen · 8. mars 2004

har ikke hatt noe å si "før"

*pirke på meg selv: 134px ikke 124px*

edit: brukt samme tanke gang som på stianweb.com og der funker det fint

Endret 8. mars 2004 av Svendsen

Svendsen · 9. mars 2004

bumpe litt og håpe noe kan hjelpe meg.

ser ikke proft ut når man må scrolle og det ikke er noe innhold som behøver scrolling.

kanskje det hjelper med kode?

div.htm:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Jentebolgen - Kongsberg</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<link href="div.css" rel="stylesheet" type="text/css">
</head>

<body>
<div id="ramme" align="left" class="ramme">
<div class="header" id="header"><img src="gfx/banner.gif" width="500" height="124" alt=""></div>
<div class="meny" id="meny">
 <p>#link1</p>
 <p>#link2</p>
 <p>#link3</p>
</div>
<div class="spacer" id="spacer"><img src="gfx/spacer.gif" width="750" height="10" alt="jentebolgen"></div>
 <div class="hoved" id="hoved">Content for class "hoved" id "hoved" Goes Here</div>
 <div class="reklame" id="reklame">
 <p>
     <a href="http://validator.w3.org/check/referer"><img border="0"
         src="http://www.w3.org/Icons/valid-html401"
         alt="Valid HTML 4.01!" height="31" width="88"></a>
 </p>
 <p>
<a href="http://jigsaw.w3.org/css-validator/">
 <img style="border:0;width:88px;height:31px"
      src="http://jigsaw.w3.org/css-validator/images/vcss" 
      alt="Valid CSS!">
</a>
</p>

 </div>
</div>

</body>
</html>

div.css:

body {
background-color: #999999;
margin-left: 20px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
height: 100%;
}
html {height: 100%}

.header {
float: left;
height: 124px;
width: 500px;
}
.meny {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #0000FF;
background-color: #FFFFFF;
float: left;
height: 124px;
width: 249px;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #000000;
}
.spacer {
height: 10px;
width: 750px;
float: left;
}
.hoved {
float: left;
height: 100%;
width: 595px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
background-color: #F6F4F4;
padding-right: 2px;
padding-left: 2px;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #000000;
}
.reklame {
background-color: #FFFFFF;
float: left;
height: 100%;
width: 145px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #333333;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #000000;
padding-right: 2px;
padding-left: 2px;
text-align: right;
}
.ramme {
height: 100%;
width: 750px;

}

la til kode, håper noe kan hjelpe til.

Endret 9. mars 2004 av Svendsen

haugsand · 9. mars 2004

Når en div er satt til height: 100%; vil den dekke 100% av skjermhøyden. Problematikken som da kan oppstå kan løses ved å ha en negativ margin, eller ved å posisjonere den til å stå øverst i vinduet, med en høy margin-top på det første elemenentet i div.

Svendsen · 9. mars 2004

Når en div er satt til height: 100%; vil den dekke 100% av skjermhøyden. Problematikken som da kan oppstå kan løses ved å ha en negativ margin, eller ved å posisjonere den til å stå øverst i vinduet, med en høy margin-top på det første elemenentet i div.

sett margin-top: -134px ??????

er ikke sikker på om jeg helt forsto hvordan jeg skulle løse det, men skjønte tankegangen tror jeg hehe

Lystig · 9. mars 2004

Weee, mekket meg en liten dårlig side med div og css, den valdierer også, det må være første gang på mange år for min del

http://home.no.net/taterg/div/index.html

PT · 9. mars 2004

sett margin-top: -134px ?

Var nok det han mente ja (dog skal ikke si noe sikkert...)

Weee, mekket meg en liten dårlig side med div og css, den valdierer også, det må være første gang på mange år for min del
*link*

Hørt om trådkapring?

magikern · 9. mars 2004

hvordan fixer jeg at en div blir 100% høy, slik at den går til bunnen?

prøvde med height=100%

her er en liten oppskrift på tre "fullhøyde" bokser på rad...

<body>
   <div id="left-sect">
   left
   </div>

   <div id="center-sect">
center 
  </div>

   <div id="right-sect">
right
  </div>

html,body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
top: 0;
left: 0;
}

#left-sect, #right-sect {
height: 100%;
width: 20%;
margin: 0;
padding: 0;
float: left;
       background: silver;
       color: white;
}

#center-sect {
height: 100%;
width: 60%;
margin: 0;
padding: 0;
float: left;
       background: white;
       color: black;
}

Svendsen · 9. mars 2004

det med margin ble feil. Altså da ble jo den div som jeg skulle ha til å gå i bunn riktig, men de over ble borte

magikern · 9. mars 2004

det med margin ble feil. Altså da ble jo den div som jeg skulle ha til å gå i bunn riktig, men de over ble borte

har ikke lest alle postene oppover her men ser at du vil ha "noe" øverst og så noen box'er under som skal dekke resten av høyden, da må du enten prøve:

html, body {

height: 100%;

}

#top {

height: 10%;

}

#resten {

height: 90%;

}

hvis du skal ha noe border evt margin imellom disse må du ta med det i beregningen...

evt for å gjøre det litt lettere å regne ut tykkelse på border og margin kan du bruke noe mer bestemt enn % f.eks in:

html,body {

height: 10in;

}

#top {

height: 2in;

}

#resten {

height: 8in;

}

hjelp til å lære div

Anbefalte innlegg

Lenke til kommentar

Videoannonse

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer