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
Variabler som ikke virker Af Frits Jensen i HTML 2 30/10/202409:37 30/10/202413:04
Aldersbegrænsning på min hjemmeside Af ØLMANDEN i HTML 2 29/09/202410:58 30/09/202412:04
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
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
I går 20:49 pop up black friday Af Malm i Virus
I går 18:31 Hvor finder jeg en netværksdriver? Af jcr18 i Wifi
I går 16:49 Identificér og hent del af tekststreng Af TheLibrarian i Excel
I går 16:30 Smart vægt til fitness tracking Af Henrik i Fitness & Smartwatches
I går 08:08 touchpad virker ikke Af Malm i PC
White papers
Flere white papers »


Premium
Teaser billede
Vil købe tele-løsninger til det offentlige for 370 millioner kroner
Læs mere »
Efterspørgslen på AI-regnekraft er enorm - og det smitter af på priserne: "Vi kan sælge næsten alt, hvad vi får ind"
Nyt værtøj fra Microsoft: Snart kan du reparere nedbrudte Windows-enheder på distancen
Politiet skriver kontrakt på 75 millioner kroner med dansk it-firma: Medarbejdere skal flytte ind hos politiet
Se alle »
Computerworld
Teaser billede
Microsofts nye pc er ekstrem billig – men kan blive ekstrem sikker og fleksibel
Læs mere »
Test: Prøv kun disse B&O-hovedtelefoner, hvis du har råd
Kæmpe datalæk på hospital: 750.000 patienters fortrolige data lækket
Test: Audi Q6 er en super fed SUV - men gør dig selv en tjeneste og kast flere penge efter den
Se alle »
CIO
Teaser billede
Konsulenthus vil rulle Microsoft 365 Copilot ud til 200.000 ansatte
Læs mere »
Kæmpe-opgave for Danske Bank har banet vej for fuldautomatiseret migrering til cloud: Nu udbredes metoden i hele AWS
Microsofts store årlige event: De tre vigtigste nøglebudskaber fra Satya Nadella om Microsofts fremtid
Stor sag mod Microsoft kan være på vej: Beskyldes for at låse Azure-kunder fast med ulovlige metoder
Se alle »
Job & Karriere
Teaser billede
Microsoft klar med ny direktion for den danske forretning: Her er de nye direktører
Læs mere »
Efter skelsættende møde med sportscoach: Stor dansk it-arbejdsplads indfører fredags-fri og isbade i arbejdstiden
Linus Torvalds giver russiske Linux-udviklere sparket: Vil ikke have noget med dem at gøre
De ansatte elsker det, tech-cheferne hader det – og HP kaster milliarder efter det
Se alle »
White paper
Teaser billede
Er din cybersikkerhed klar til AI-revolutionen?
Læs mere »
Cyberstatus 2024: Her er truslerne – og her forbereder virksomhederne sig
MDR: Transparent sikkerhed og overvågning i realtid
Sådan gør du: Elektronisk dokumentudveksling i praksis
Se alle »

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