CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg
Cookie ikon
Avatar billede popcorndrink Nybegynder
19. juni 2006 - 19:26 Der er 29 kommentarer og
1 løsning

Få content til at strække sig ned til bunden af browseren

Hey eksperter,

Jeg mangler en CSS-løsning til at få min content side strækket ud til bunden af siden. Problemet ligger i, at contents højde er mindre end hele browser vinduet.

Jævnfør den her side (den uddyber problemet på engelsk, håber det er ok):
http://www.ampsoft.net/webdesign-l/making-web-pages-extend-to-bottom.html

Men da jeg hellere vil løse det med CSS, da det er mere universelt kan jeg ikke bruge siden til så meget og derfor skriver jeg her i håb om en løsning.

Håber I forstår hvad jeg mener.
Avatar billede mclemens Nybegynder
19. juni 2006 - 20:05 #1
Laves tit med tables eller andet men se evt. på denne her:
http://www.eksperten.dk/spm/712486#rid6300689
... ved ikke om det hjælper dig?
Avatar billede mclemens Nybegynder
19. juni 2006 - 20:07 #2
Javascript kan også være nødvedigt i enkelte tilfælde
... men, det afhænger alt sammen af design ...
Avatar billede mclemens Nybegynder
19. juni 2006 - 20:11 #3
Ellers hvis det bare er en strækning af content området og området ALDRIG kommer over 100% height kan du køre en css: html,body{height:100%;padding:0px;margin:0px;} samt en #contentid{height:100%;} ... dog skal man i tilfælde hvor den kommer over 100% have et css hack ind ... tror plazm har lagt et IE css hack en inde i tråden også...
Avatar billede mclemens Nybegynder
19. juni 2006 - 20:13 #4
- Problemet er nemlig at IE p.t. ikke understøtter min-height i css ...
Avatar billede zhristian Nybegynder
19. juni 2006 - 20:15 #5
Jeg kom til at poste fra min vens bruger, så skriver lige fra min egen nu:

mclemens: Det virker ikke i mit tilfælde. Strukturen er således at jeg har følgende:

<div id="content">
<div id="header">
<div id="logo"></div>
<div id="menu"></div>
</header>
<div id="content"></div>
</div>

Det er så content, som skal strække sig hele vejen ned, men det gør den ikke. Det jeg egentligt søger, er en CSS-løsning på http://www.ampsoft.net/webdesign-l/making-web-pages-extend-to-bottom.html
Avatar billede zhristian Nybegynder
19. juni 2006 - 20:18 #6
Hov, det skal selvfølgelig ikke være </header>, men </div> :)
Avatar billede mclemens Nybegynder
19. juni 2006 - 20:27 #7
Nu siger html markup mig ikke meget om den visuelle repræsentation af markup'en - et billede der viser det siger en del mere ... Men, hvis det er den der står her:
http://www.ampsoft.net/webdesign-l/making-web-pages-extend-to-bottom-example3.html
- Det skal ende op med burde denne her kunne løse det ... kigger lige på en frasplitning af den nederste div. http://www.eksperten.dk/spm/712486#rid6300689
Avatar billede zhristian Nybegynder
19. juni 2006 - 20:29 #8
Doh, jeg fejler helt i dag. <div id="content"> øverst er selvfølgelig <div id="container">. Argh! Helt forfra:

<div id="container">
<div id="header">
<div id="logo"></div>
<div id="menu"></div>
</div>
<div id="content"></div>
</div>
Avatar billede mclemens Nybegynder
19. juni 2006 - 20:30 #9
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
html,body{height:100%;
margin:0px;padding:0px;overflow:hidden;}
</style>
</head>
<body><div style="position:relative;top:0px;left:0px;background:#aaa;height:100%;width:100%;background:#fff;overflow-y:auto;overflow-x:hidden;">


<div style="position:absolute;top:0px;left:0px;background:#aaa;height:50px;width:100%;z-index:10;">Test</div>

<div style="position:absolute;top:50px;left:0px;background:#888;height:50px;width:100%;z-index:10;">Test</div>


<div style="position:absolute;top:0px;height:100%;width:100%;background:#666;z-index:9;"><div style="position:relative;margin-top:100px;">Start<br>Test<br><br>Test<br><br>Slut

</div></div>

</div></body></html>
Avatar billede mclemens Nybegynder
19. juni 2006 - 20:31 #10
- Det er dog ikke til at sige om din menu er en top menu ud fra din markup eller om det er en side menu ... man kan ikke se design ud fra kort struktureret markup ...
Avatar billede mclemens Nybegynder
19. juni 2006 - 20:35 #11
Med en container wrapper også...


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
html,body{height:100%;
margin:0px;padding:0px;overflow:hidden;}
#container{width:770px;margin:0px auto;position:relative;height:100%;}
</style>
</head>
<body><div style="position:relative;top:0px;left:0px;background:#aaa;height:100%;width:100%;background:#fff;overflow-y:auto;overflow-x:hidden;">

<div id="container">
<div style="position:absolute;top:0px;left:0px;background:#aaa;height:50px;width:100%;z-index:10;">Test</div>

<div style="position:absolute;top:50px;left:0px;background:#888;height:50px;width:100%;z-index:10;">Test</div>


<div style="position:absolute;top:0px;height:100%;width:100%;background:#666;z-index:9;"><div style="position:relative;margin-top:100px;">Start<br>Test<br><br>Test<br><br>Test<br><br>Test<br><br>Test<br><br>Test<br><br>Test<br><br>Test<br><br>Test<br><br>Test<br><br>Test<br><br>Test<br><br>Test<br><br>Test<br><br>Test<br><br>Test<br><br>Test<br><br><br>Slut

</div></div>

</div>

</div></body></html>
Avatar billede mclemens Nybegynder
19. juni 2006 - 20:36 #12
<body><div style="position:relative;top:0px;left:0px;background:#aaa;height:100%;width:100%;background:#fff;overflow-y:auto;overflow-x:hidden;">

^ Den yderste div skal måske have rettet overflow-y:auto; til overflow-y:scroll;
... afhængig af hvad man foretrækker...
Avatar billede mclemens Nybegynder
19. juni 2006 - 20:37 #13
overflow-x:hidden; <- og måske have den fjernet ...
Avatar billede zhristian Nybegynder
19. juni 2006 - 20:40 #14
Det er en top-menu. Den struktur du anvender der, er jeg ikke særligt glad for. Den bliver alt for omfattende at integrere i mit nuværende design. Jeg søger bare en løsning på, hvordan det, minimalistisk, kunne se ud, hvis jeg ønsker samme form som:

<div id="container">
<div id="header">
<div id="logo"></div>
<div id="menu"></div>
</div>
<div id="content"></div>
</div>

Container centrerer siden. Header indeholder en top-menu og et logo. Content er alt, ja, content.
Avatar billede mclemens Nybegynder
19. juni 2006 - 20:48 #15
[ Det er en top-menu. Den struktur du anvender der, er jeg ikke særligt glad for. Den bliver alt for omfattende at integrere i mit nuværende design. Jeg søger bare en løsning på, hvordan det, minimalistisk, kunne se ud, hvis jeg ønsker samme form som: ]
- Jamen, så kigger vi om der kommer en anden forbi der kan løse den ;o) ... Det er selvfølgelig muligt at plazm's IE css hack kan hjælpe dig... IE understøtter ikke min-height så for at få den til det er der 3-4 muligheder:

- Table's: Har dog den ulempe at IE selv fordeler ekstra plads.
- Div css hack som f.eks. plazm's ... Ulempe: Hvordan reagerer nye udgaver af IE?
- Ekstra wrapper div's som dem jeg kommer med ... Ulempe: Ektra markup og evt. også spørgsmålet om IE's reaktion ... den bør dog overholde det da det er ren css og ikke decideret css hack..
- Javascript, ja deaktiveret javascript og stresning af browseren...

- Kan ikke komme med bedre bud ... joh, du kan have en baggrundsfarve på din container magen til dit content og køre: html,body{height:100%;padding:0px;margin:0px;} samt #container{height:100%;background:#abc;} - og så samme farve på din content div...

- Det kan dog godt være der sidder andre med et par es'er på hånden :/
P.s.: Plazm's post med css hacket er her: http://www.eksperten.dk/spm/712486#rid6283502
Avatar billede mclemens Nybegynder
19. juni 2006 - 20:50 #16
[ Container centrerer siden. Header indeholder en top-menu og et logo. Content er alt, ja, content. ] - Ok, så havde jeg fanget ideen - sådan virkede  den sidste jeg kom med også - giver dig dog ret i, at hvis man har designet ens side, og så vil have det implementeret, så er det lettere med javascript, hvis man ikke kører php eller asp serversprog f.eks...
Avatar billede zhristian Nybegynder
19. juni 2006 - 21:04 #17
Mclemens: Siden er et PHP-system, så hvad ville du gøre der, da?
Avatar billede mclemens Nybegynder
19. juni 2006 - 21:09 #18
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
html,body{height:100%;
margin:0px;padding:0px;overflow:hidden;}
body{position:relative;top:0px;left:0px;background:#aaa;height:100%;width:100%;background:#fff;overflow-y:auto;overflow-x:auto;}

#container{width:770px;margin:0px auto;position:relative;height:100%;}

#header{position:absolute;top:0px;left:0px;background:#aaa;height:100px;width:100%;z-index:10;}

#content{position:absolute;top:0px;height:100%;width:100%;background:#777;z-index:9;}

#logo{height:25px;background:#666;}
#menu{height:75px;background:#888;}

#inner{position:relative;margin-top:100px;}

</style>
</head>

<body><div id="container">

<div id="header">

<div id="logo">Test</div>

<div id="menu">Test</div>

</div>

<div id="content"><div id="inner">Start<br>Test<br><br><br>Slut</div></div>

</div></body></html>

^ - Jeg ville lægge den ekstra div ind ... har lige lagt styles op og navngivet de elementer jeg lagde før - og udnyttet styling på body tagget også ... hvis ikke du kan tilføje en div lige inden til din content div så skal php systemet du kører med måske struktureres lidt mere...
Avatar billede mclemens Nybegynder
19. juni 2006 - 21:11 #19
inden til -> indeni

... Men, indrømmer dog selv - at mit eget php system var lidt sløvt i
opbygningen, indtil jeg satte min php kode lidt mere op i punkter...
Avatar billede mclemens Nybegynder
19. juni 2006 - 21:17 #20
[ Den struktur du anvender der, er jeg ikke særligt glad for. ]
- Men, det er sikkert css strukturen du hentyder til... Og indrømmet
den er ikke helt optimal, jeg er bare ikke kommet "videre" endnu...
Avatar billede zhristian Nybegynder
20. juni 2006 - 00:33 #21
mclemens: Jeg prøver at integrerer det, og vender tilbage i morgen :-) Tak for hjælpen indtil videre!
Avatar billede zhristian Nybegynder
20. juni 2006 - 00:49 #22
mclemens: Ok, det virker sådan nogenlunde. Jeg ønsker et mellemrum mellem min header og content, hvordan gør jeg så det?
Avatar billede mclemens Nybegynder
20. juni 2006 - 01:23 #23
#inner{position:relative;margin-top:120px;}
^ - Du øger margin top på inner ... der egentlig er blevet til din nye content - den anden content starter helt oppe i toppen og er 100% i højden ... derfor skal du pille ved inner istedet...

Hvis du skal have en anden farve der - imellem de to bliver det straks lidt mere tricky ... så kan du f.eks. prøve at indsætte en spacer div i toppen af din inner div med noget css style på height:etantalpx; og en baggrund eller evt indsætte et billede der med baggrundsfarven...
Avatar billede mclemens Nybegynder
20. juni 2006 - 01:30 #24
(hopper til køjs nu)
Avatar billede mclemens Nybegynder
29. juli 2006 - 12:25 #25
hjalp det?
Avatar billede mclemens Nybegynder
25. august 2006 - 17:34 #26
Tak for point :)
Avatar billede popcorndrink Nybegynder
26. august 2006 - 14:39 #27
Vi valgte at benytte javascript funktionen i stedet, men tak for dit engagement. Du fortjener de point =)
Avatar billede mclemens Nybegynder
26. august 2006 - 14:44 #28
Ok, og tak for point :)
Avatar billede mclemens Nybegynder
26. august 2006 - 15:04 #29
Hov, det havde jeg sagt :D

(((... af hensyn til nogen der evt. senere læser tråden så kaster jeg lige to links http://www.eksperten.dk/spm/712486#rid6300689 , http://www.eksperten.dk/spm/717767#rid6320320 og et rettet eksempel:






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

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

#container{width:770px;margin:0px auto;position:relative;height:100%;}

#header{position:absolute;top:0px;left:0px;height:100px;width:100%;z-index:10;}
#logo{height:25px;background:#666;}
#menu{height:75px;background:#888;}

#content{position:relative;width:100%;height:100%;background:#777;}
#container>#content{min-height:100%;height:auto;}
#spc{height:100px;width:100%;}

</style></head><body><div id="container">

<div id="header">
<div id="logo">Test</div>
<div id="menu">Test</div>
</div>

<div id="content"><div id="spc"></div>Start<br>Te<br>
rt<br>Tert<br>Tert<br>Tert<br>Tert<br>Tert<br>Tert<br>Tert<br>Tert<br>Tert<br>Tert<br>Tert<br>Tert<br>Tert<br>Tert<br>Tert<br>Tert<br>Tert<br>Tert<br>Tert<br>Tert<br>Tert<br>Tert<br>Tert<br>Tert<br>Tert<br>Tert<br>Tert<br>Tert<br>Tert<br>Tert<br>Tert<br>Tert<br>Tert<br>Tert<br>Tert<br>Tert<br>Tert<br>Tert<br>Tert<br>Tert<br>Tert<br>Tert<br>Tert<br>Tert<br>Tert<br>Tert<br>Tert<br>Tert<br>Tert<br>Tert<br>Tert<br>Tert<br>Tert<br>Tert<br>Tert<br>Tert<br>Tert<br>Tert<br>Tert<br>Tert<br>Tert<br>Tert<br>Tert<br>Tert<br>Tert<br>Tert<br>Tert<br>Tert<br>Tert<br>Tert<br>Tert<br>Tert<br>Tert<br>Tert<br>Tert<br>Tert<br>Tert<br>Tert<br>Tert<br>Tert<br>Tert<br>Tert<br>Tert<br>Tert<br>Tert<br>Tert<br>Tert<br>Tert<br>Tert<br>Tert<br>Tert<br>Tert<br>Tert<br>Tert<br>Tert<br>Teaaaaaaaaaaaaaaaaa Slut
</div>

</div></body></html>
Avatar billede mclemens Nybegynder
26. august 2006 - 15:06 #30
(det andet virkede ikke helt i Firefox, det havde jeg ikke set)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel Indlæg Oprettet Seneste aktivitet
Bredde på div elementer Af dane022 i HTML 2 16/02/202408:29 20/02/202412:50
Hvilken mindste mobilstørrelse til hjemmeside Af CSharpRazor i HTML 2 21/12/202322:51 22/12/202308:03
validering <input tlfnr. Af slein55 i HTML 5 15/10/202311:43 15/10/202314:51
Link fra form input Af jnrmgs i HTML 9 19/09/202319:10 23/09/202313:11
includere i HTML Af slein55 i HTML 3 15/09/202313:47 16/09/202309:40
Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Opret Log ind

Du kan også logge ind via nedenstående tjenester



Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
20 min siden Oprette / gemme et par fotos i en mappe - Samsung Galaxy A 14 5G ? Af Ikke-ekspert i Mobiltelefoner
I dag 11:14 Bærbar til Sims 3? Af idamarie i PC
I dag 10:49 Adobe til excel Af densortehingst i Andet software
I dag 09:26 Chrome Af fjorbak i Andet netværk
I går 21:08 Hvor kan man se Alan Turings mekaniske apparat til at løse Enignas koder Af KurtG i Andet hardware
White papers
Flere white papers »


Premium
Teaser billede
Hackere udnytter CrowdStrike-nedbruddet: Spreder malware ved hjælp af falske løsninger
Læs mere »
Microsoft skyder dele af skylden for CrowdStrike-nedbrud på 15 år gammel EU-aftale
Derfor står Danske Bank foran en kæmpe AWS-transformation: Ellers skulle vi bygge en ny infrastruktur for at følge med
Det er blevet kaldt ”det største it-nedbrud i historien” og omkostningerne kan nemt løbe op i syv milliarder kroner: Men hvem skal betale for Crowdstrikes fejl?
Se alle »
Computerworld
Teaser billede
Microsoft-nedbrud spreder sig: It-systemer i lufthavne verden over er ramt
Læs mere »
Test: Denne mikro-pc er smartere end de stærkeste desktop-maskiner - men flopper alligevel
Elon Musk dropper CrowdStrike efter kæmpe nedbrud
Hundredevis af flyafgange ramt af stort Microsoft-nedbrud
Se alle »
CIO
Teaser billede
Microsoft er på sagen: I gang med at løse kæmpe nedbrud efter katastrofal Crowdstrike-fejl
Læs mere »
Så mange Microsoft-enheder blev ramt af gigantisk Crowdstrike-koks
Telenor skrotter ældre it-system: Nyt system er en hyldevare
Peter Lüth udlever CTO-drømmen: Bygger et system fra bunden og tjener kassen på det
Se alle »
Job & Karriere
Teaser billede
Efter 12 år er NNIT's hovedkvarter i Søborg nu ryddet og tomt - alle arbejder hjemme: "Det er med et vist vemod"
Læs mere »
Norlys skal splittes op i fem selskaber: Nu bliver flere ansatte og ledere fyret
Dansk top-profil trækker sig fra Microsoft: Skal være direktør i TDC Erhverv
KMD-direktør forlader selskabet: Det skal hun nu
Se alle »
White paper
Teaser billede
MDR: Transparent sikkerhed og overvågning i realtid
Læs mere »
Få mere ud af din cloudinfrastruktur og gør op med de konstant stigende omkostninger
Guide: Sådan udvikler du en moderne netværksstrategi
Det behøver ikke at gøre ondt: Sådan gør du livet lettere for kunder med multicloud
Se alle »

Events
Flere events »
White papers
Flere white papers »
IT-Kurser
Se alle vores it-kurser »