---
title: "auto höjd på div"
type: "forum-thread"
url: "https://www.webforum.nu/amne/html-css/88358-auto-höjd-på-div"
topic: "HTML & CSS"
topic_url: "https://www.webforum.nu/amne/html-css"
author: "clearvolume"
published: "2003-10-12T20:57:52.000Z"
updated: "2003-10-17T09:04:16.000Z"
replies: 18
views: 587
page: 1
pages: 1
language: "sv-SE"
site: "webForum — webforum.nu"
rights: "Upphovsrätten till varje inlägg tillhör dess författare."
attribution: "Citera som: webForum, https://www.webforum.nu/amne/html-css/88358-auto-höjd-på-div"
---
# auto höjd på div
## #1 — clearvolume, 2003-10-12T20:57Z
får inte till det...
jag har en table som innehåller tre fält, en logga (137px), en meny(20px) och en "content". I content vill jag lägga 3 andra lager, rubrik, brödtext och en bild.
Nu vill jag att content diven ska vara resterande av skärmen (under loggan och menyn asså) och när bröd texten är längre än "orginalfönstret" så ska hela sidan scrollas...
```
title
meny
Rubrik
Bröd text
```
```
html {
height:100%;
margin:0px;
padding:0px;
}
body {
margin: 0px;
overflow:auto;
background-color:#b35900;
}
#logo {
position:relative;
top:0px;
left:0px;
width:640;
height:137;
background-image: url(../images/logo.gif);
background-position: top center;
background-repeat: none;
}
#topmenu {
position:relative;
top:0px;
left:0px;
width:640;
height:20;
background-color:#ff8000;
border:1px solid #000000;
}
#content {
position:relative;
top:0px;
left:0px;
width:640px;
height:100% -157px;
background-color :#ffffff;
border:1px solid #000;
}
#rubrik {
position:absolute;
top:10px;
left:10px;
width:100px;
height:30px;
padding:5px;
background-color:#d3d3d3;
font: 24px "trebuchet ms", tahoma, Geneva, Arial, Helvetica, sans-serif;
color: #000000;
font-size-adjust: 0.51;
text-align:left;
}
#brod {
position:absolute;
top:65px;
left:5px;
width:400px;
height:auto;
background-color:#d4d4d4;
font: 13px "trebuchet ms", tahoma, Geneva, Arial, Helvetica, sans-serif;
color: #000000;
font-size-adjust: 0.51;
text-align:left;
}
```
...jag skulle behöva lite hjälp att lösa detta så det funkar i både IE och NS.
(blev visst mycket kod, men det då ser ni hur jag har det iaf)
Permalänk: https://www.webforum.nu/p/88358
## #2 — Jaar, 2003-10-13T07:04Z
Jag har precis börjat få häng på det här med div-"lager" och skulle rekomendera dig att ersätta layouttabellen med divar.
Kolla på , och kapitel "10.6.4 Absolutely positioned, non-replaced elements", tror det står där hur du lyckas få till det du vill komma åt.
Men tyvärr har jag ingen kod som löser det direkt åt dig
Permalänk: https://www.webforum.nu/p/1182853
## #3 — clearvolume, 2003-10-13T07:22Z
tanken var från början att bara köra divar, men när jag inte fick till det försökte jag med hederliga tables... men fick inte till det i NS iaf... :/
...men jag ska kika på w3 se om jag kommer fram till något.
Tack!
Permalänk: https://www.webforum.nu/p/1182861
## #4 — jarvklo, 2003-10-13T10:03Z
Här är en alternativ lösning på ditt problem...
Kör med bara div:ar.
Lägg bakgrundsfärgen för "resten av skärmen" som bakgrundsfärg i en "container-div" så "simulerar" du att den ligger bakom din brödtext ;)
Trixa sedan lite med container-div:en så att den blir "100%" i de "vanligaste" webbläsarna (idealt skulle man bara behöva skriva
```
min-height:100%
```
för containern för att få det att funka, men varken MSIE eller Opera stödjer dessa f.n. som det verkar - så man får fulkoda CSS:en för #container lite - på två ställen närmare bestämt ;) ).
Kolla källkoden i detta dokument:
"fulkodningarna" är dokumenterade med kommentarer...
Permalänk: https://www.webforum.nu/p/1182963
## #5 — clearvolume, 2003-10-13T17:52Z
fasen vad bra.. sååå tacksam!
Nu tänkte jag vara lite besvärlig... när bröd texten blir längre än sidan (så den scrollar) hänger inte content rutan med ända ner längre i NS...
kan du/ni hjälpa mig med det så vore jag ännu mer tacksam!
:r (Känns som att jag får sätta mig en helg och läsa på min css, inget funkar för mig längre) :l
Permalänk: https://www.webforum.nu/p/1186301
## #6 — jarvklo, 2003-10-13T18:50Z
Hmm...
Funkade för mig (kör iofs Firebird 0.6.1 / Win - så det kanske beror på att någon äldre NS-webbläsare blir konfunderad av "opera-fulhacket" i exemplet på något sätt... Eller nåt! )
Hursomhelst!
Exemplet jag gav i förra inlägget lägger webbläsarna i "quirks" mode (eftersom det var så du körde enligt ditt kodexempel)...
Men nu provade jag med att slänga in en \
Funkar detta även i din NS? (nyfiken - vilken version var det du fick problem i förresten ;) )
PS.
Ditt problem har nog mer att göra med att olika webbläsare buggar ur på olika sätt när man kör "rena" CSS-lösningar... Och det är \*många\* som slåss med sådant just nu ;)
Ge inte upp!
Googla om du kan klura ut vad man skall söka efter och fråga här istället annars - det är ju så man lär sig i praktiken, eller hur ? ;)
:bire
Permalänk: https://www.webforum.nu/p/1186334
## #7 — clearvolume, 2003-10-14T16:30Z
super... nu verkar det funka!
Bara en sista grej.... jag vill nu placera ut rubrik och bröd text på den vita ytan... om jag anger
```
#rubrik {
position:relative;
top:10px;
left:10px;
margin:auto;
width:100px;
height:30px;
padding:5px;
background-color:#d3d3d3;
font: 24px "trebuchet ms", tahoma, Geneva, Arial, Helvetica, sans-serif;
color: #000000;
}
```
så utgår den ifrån mitten av sidan och inte från kanten på containern... jag har tagit bort alla "center" men ändå är de align center... varför?
Man lär sig genom praktik helt klart!!
Jag har NS7.02
Permalänk: https://www.webforum.nu/p/1186852
## #8 — jarvklo, 2003-10-14T18:58Z
Hmm....
Position:relative från den position där föregående tagg slutar (dvs den punkt där taggens innehåll skulle börja "ritas ut" i det "normala flödet")... Den är alltså relativ "insättningspunkten" och inte containern. Kanske har det med det att göra ?
Detaljer om positionering:
Om du bara vill "peta in och ner" en blocktagg lite, kanske du kan prova att meka med margin-left och margin-top på den istället för att köra med position:relative.
> jag har tagit bort alla "center" men ändå är de align center... varför?
Har du en länk till koden som den ser ut nu så att man kan se helheten innan man gissar fel på orsaken - det är antagligen flera detaljer i detta det skulle kunna bero på ;)
/Red:
Hmm... Förresten... Kom på en sak...
Du har en fast width och margin:auto - då "skall" den centrera blocket enligt
> If both 'margin-left' and 'margin-right' are 'auto', their computed values are equal.
De där text-align:center som är med i mina exempel är i de flesta fall "standard-workarounds" för MSIE (som inte följer CSS2 och alltså inte bryr sig om detta ;) ) som jag plockat upp från t.ex.
Permalänk: https://www.webforum.nu/p/1186962
## #9 — clearvolume, 2003-10-15T18:18Z
Jag vill lägga en div med brödtext och en med bild brevid varandra och då kan jag inte använda position:relative.
Men eftersom jag har de divarna i container, borde de då inte räkna position från det övre vänstra hörnet av containern och inte hela fönstret vid position:absolute?
Och margin räknas väl från boxen över, så jag kan inte lägga två brevid varandra.
Jag håller på och tar mig igenom texten om positionering på w3, men det är svårt att få en klar bild över det... men jag jobbar på det.
(Jag kan PM:a dig en länk, då jag inte vill ha den ligga ute)
Permalänk: https://www.webforum.nu/p/1187719
## #10 — jarvklo, 2003-10-15T18:44Z
Hmm....
Jag menade nog egentligen att du inte behöver fundera över position:relative överhuvudtaget i detta fall, utan att du kan göra enklare positioneringar med individuella marginalvärden som t.ex. margin-left och margin-top... (du har ju möjlighet att lägga alla block i "rätt" ordning för din layout i källkoden ;) )
Och det där med bilden bredvid går att lösa med float: om man vill... (t.ex. genom att begränsa bredden på både brödtexten och bild-div:en, och sedan t.ex. "floata" det block som skall vara till höger...
Fungerar för dina behov ?
Om inte så får du gärna PM:a mig med en länk till sidan du har problem med - på villkor att du lovar att sammanfatta lösningen här i forumet sedan (eller att vi gör det tillsammans) - jag antar att det finns några fler nyfikna därute ;)
Permalänk: https://www.webforum.nu/p/1187732
## #11 — clearvolume, 2003-10-15T19:44Z
hmm.. jag fick till om jag tog bort centreringen av sidan och sen sätta position:absolute på rubrik och bild och bröd texten placerade jag med margins...
försökte placera rubriken med margins oxå först, men det gick inte, men jag ser nu att du har gjort så, så jag måste ha haft nått annat fel.
...med lösningen du hade nu kan jag behålla centreringen om jag vill.
Permalänk: https://www.webforum.nu/p/1187757
## #12 — clearvolume, 2003-10-15T20:29Z
kom på att jag kanske skulle visa min "lösning"... så här ser det ut nu...
[http://member.webforum.nu/5366/autohojd_ett_alternativ.html](https://www.webforum.nu/member/clearvolume/autohojd_ett_alternativ.html)
(får inte till det om jag kör med margins för att placera rubrik)
Permalänk: https://www.webforum.nu/p/1187771
## #13 — jarvklo, 2003-10-15T21:55Z
Mekade lite med din kod -
Tog bl.a. bort dina absolutpositioneringar och "positionerade" med marginaler och paddings i #content...
och då blev det såhär:
Ligger det i linje med det du är ute efter ?
Permalänk: https://www.webforum.nu/p/1187799
## #14 — clearvolume, 2003-10-16T07:33Z
det är precis vad jag är ute efter...
än en gång grymt tacksam!
stöter jag på mer problem hör jag av mig... hahah... :e
Permalänk: https://www.webforum.nu/p/1187877
## #15 — clearvolume, 2003-10-16T18:34Z
givetvis har jag stöt på ett problem. När jag kortar ner texten så den blir kortare än bilderna så följer inte #content med riktigt, samma sak om jag bara har en bild.. grr...
då tänkte jag att om jag lägger bild diven i content så borde det ju gå.. jodå, det funkar i IE men inte i NS...
hur jag än försöker får jag bara inte till det... :l
Permalänk: https://www.webforum.nu/p/1188364
## #16 — jarvklo, 2003-10-16T18:45Z
If all else fails - use tables ;)
*Gammalt vist webb-ordspråk*
Skämt åsido...
Antar att det är float:right på div:en som innehåller bilderna som ställer till det...
Har ingen lösning på rak arm dock...
Men du kan ju t.ex. göra om content till en tabell med två kolumner (och ta bort float:right på #img) så länge tills någon lyckas klura ut en bättre (eller iallafall helt div-baserad) lösning...
Återkommer om jag kommer på något bättre!
Permalänk: https://www.webforum.nu/p/1188375
## #17 — clearvolume, 2003-10-16T20:19Z
gamla hederliga tables... :)
Permalänk: https://www.webforum.nu/p/1188440
## #18 — jarvklo, 2003-10-17T07:58Z
Hmm....
Nu kom jag på var jag sett lösningen: har en snygg variant på hur man löser multikolumnlayouter med CSS...
Den består i princip i att du "floatar" både #img och #brod och sedan lägger till en "spacer-div"
```
```
efter den sista av de två i koden...
Spacer-div:en ser då till att #content sträcks ut som du förväntar dig ;)
Kolla resultatet på (mer bilder än text)
och
(med mer text än bilder)
Hoppas det löser sig för dig nu! ;)
Permalänk: https://www.webforum.nu/p/1188593
## #19 — clearvolume, 2003-10-17T09:04Z
det gick ju bra.. men inte om jag bara kör en bild. Men det löser jag med att lägga in en transparent bild som bild två... så blir det skit snyggt.
Tack än en gång!
Permalänk: https://www.webforum.nu/p/1188638
---
Tråden på webben: https://www.webforum.nu/amne/html-css/88358-auto-höjd-på-div