CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg
Cookie ikon
Avatar billede skwizie Nybegynder
10. februar 2009 - 14:17 Der er 29 kommentarer og
1 løsning

100% side med div

Jeg skal have lavet følgende side:

<div height = 30px>
<div height = resten>
<div height = 160px>

Hvordan skal CSS se ud for den div der skal have højden "resten" hvis de alle 3 skal udfylde siden 100%?
Avatar billede olebole Juniormester
10. februar 2009 - 14:20 #1
<ole>

Det er HTML ikke beregnet til. Skal det løses, må du ty til mindre fikse (panik)løsninger i JavaScript

/mvh
</bole>
Avatar billede jannek_ek Nybegynder
10. februar 2009 - 14:22 #2
hmm prøv noget med:
div.top {
position: absolute;
top: 0px;
height: 30px;
}
div.resten {
position: absolute;
top: 30px;
bottom: 160px;
}
div.bund {
position: absolute;
bottom: 0px;
height: 160px;
}

har ikke lige testet det, men vil da mene at det virker
Avatar billede olebole Juniormester
10. februar 2009 - 14:25 #3
jannek_ek >> Det gør det helt sikkert ikke  =)
Avatar billede skwizie Nybegynder
10. februar 2009 - 14:26 #4
jannek_ek -> hmmm, det ser ikke lige ud til at virke
Avatar billede olebole Juniormester
10. februar 2009 - 14:26 #5
- det giver ikke mening at tildele et element både en top- og en bottom-værdi ... eller for den sags skyld en left- og en right-værdi
Avatar billede skwizie Nybegynder
10. februar 2009 - 14:29 #6
olebole -> Har du noget andet forslag, hvis det skal laves rigtigt?

Man kan jo godt tildele et element en left værdi hvis man ønsker at centrere et div på midten
Avatar billede olebole Juniormester
10. februar 2009 - 14:31 #7
Ja, mit forslag er: lad være  =)

HTML er som sagt ikke beregnet til den slags design, så du kommer ud i uhensigtsmæssige lapperier. Betragt det som en designfejl  =)
Avatar billede olebole Juniormester
10. februar 2009 - 14:32 #8
"Man kan jo godt tildele et element en left værdi hvis man ønsker at centrere et div på midten" >> Ja, men det har ikke noget med sagen at gøre. Du kan ikke på én gang give et element både en left- og en right-værdi ... selvfølgelig med mindre, værdien er 'auto'  ;o)
Avatar billede jannek_ek Nybegynder
10. februar 2009 - 14:36 #9
<html>
<head>
<style>
div.top {
    position: absolute;
    left: 0px;
    width: 300px;
    top: 0px;
    height: 30px;
    background-color: black;
}
div.resten {
    position:absolute;
    left: 0px;
    width: 300px;
    top: 30px;
    bottom: 160px;
    background-color: red;
}
div.bund {
    position: absolute;
    left: 0px;
    width: 300px;
    bottom: 0px;
    height: 160px;
    background-color: black;
}
</style>
</head>
<body>
<div class="top"></div>
<div class="resten"></div>
<div class="bund"></div>
</body>
</html>

den her virker i ff, men ikke i ie.. så det hjælper ikke det store.

men tror olebole har ret i, at det ikke er det html er beregnet til. hvis det er vigtigt i forhold til designet, må du nok bruge enten tables eller js.
Avatar billede skwizie Nybegynder
10. februar 2009 - 14:40 #10
olebole -> nej, det har du selvfølgelig ret i :)
Avatar billede skwizie Nybegynder
10. februar 2009 - 14:41 #11
jeg anvender bare et andet design.. det skal være rigtigt fra start af :0)
Avatar billede olebole Juniormester
10. februar 2009 - 14:42 #12
Jo, det virker faktisk (selvom det ikke burde) i både IE, FF og Opera - men hvem gider vedligeholde et site, der er absolut positioneret?  =)

www.VildNinja.dk >> Du disabler store og vigtige dele af CSS i IE, hvis du ikke benytter en DTD som det første i dokumentet
Avatar billede roenving Novice
10. februar 2009 - 14:44 #13
Man kan, ved at anvende skygge-elementer, komme i nærheden, men den er heller ikke skudsikker igennem alle browserne, så jeg vil tilslutte mig oles råd: Lad være !-)

Lav i stedet et design med en defineret minimumshøjde eller med fast højde, hvor resten så kan scrolle ...
Avatar billede jannek_ek Nybegynder
10. februar 2009 - 14:57 #14
@olebole
det vidste jeg ikke. det burde jeg nok se på, med de nye sider jeg laver.Men tak fordi du siger det :)
Avatar billede skwizie Nybegynder
10. februar 2009 - 15:03 #15
olebole -> læg et svar, så får du point, da du kom med det svar jeg konkluderede ud fra :)
Avatar billede olebole Juniormester
10. februar 2009 - 15:04 #16
jannek_ek >> Du kan prøve et af mine gamle 'stunts'. Prøv denne fil i FF og IE. Fjern så DTD'en og test i begge browsere igen  ;o)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style>
div {
    width: 200px;
    height: 200px;
    background: yellow;
}
div.withBorder {
    border: 75px solid red;
}
</style>
</head>
<body>

<div>bla</div>
<div class="withBorder">bla</div>

</body>
</html>
Avatar billede olebole Juniormester
10. februar 2009 - 15:04 #17
Kommer her  =)
Avatar billede jannek_ek Nybegynder
10. februar 2009 - 15:13 #18
@olebole
Lækkert, det border problem er et jeg har kæmpet med før :)
Avatar billede olebole Juniormester
10. februar 2009 - 15:45 #19
skwizie >> Tak for points  =)

jannek_ek >> Det glæder mig. Der sker forresten det samme med padding. Den skal ligesom border lægges til width og height - men det gør IE ikke i det, man kalder quirks mode (uden DTD). Lidt læsestof om emnet:
    http://msdn.microsoft.com/en-us/library/bb250395(VS.85).aspx#cssenhancements_topic2
Avatar billede olebole Juniormester
10. februar 2009 - 15:46 #20
Ups ... ankeret virker ikke (Eksperten vil ikke aceptere parenteser i URL'er) - men du skal læse under:
    'The !DOCTYPE "Switch"'
Avatar billede mclemens Nybegynder
10. februar 2009 - 16:11 #21
Ignorer lige denne kommentar (nysgerring)
http://msdn.microsoft.com/en-us/library/bb250395%28VS.85%29.aspx#cssenhancements_topic2
Avatar billede bjawnie Nybegynder
10. februar 2009 - 17:49 #22
Hej,

Du kan evt. også kigge her http://www.dave-woods.co.uk/?p=144 han har et fint eksempel på hvordan man får et layer til at være 100% højt. Derfra kan man så arbejde videre. Det bliver måske ikke helt efter den oprindelige hensigt, men det er værd at vide at den slags skam godt kan lade sig gøre.
Avatar billede olebole Juniormester
10. februar 2009 - 22:23 #23
bjawnie >> "men det er værd at vide at den slags skam godt kan lade sig gøre." >> Ja, man kan også farve et link grønt, men det har heller ikke noget med spørgsmålet at gøre. Problemet er ikke at få et element til at fylde 100% i højden. Læs tråden  ;o)
Avatar billede olebole Juniormester
10. februar 2009 - 22:27 #24
- og kodere, der ikke selv kan kode ordentligt, bør man nok ikke lytte særlig meget til ... og det kan Dave Woods tydeligvis ikke!
Avatar billede bjawnie Nybegynder
10. februar 2009 - 23:06 #25
Jeg har læst tråden. Spørgsmålet lød:

"Hvordan skal CSS se ud for den div der skal have højden "resten" hvis de alle 3 skal udfylde siden 100%? "

Det forekommer mig at Dave Wood's løsning rammer noget tættere end din "lad være" metode.
Avatar billede mclemens Nybegynder
11. februar 2009 - 00:20 #26
Tja, hvis jeg skulle vælge imellem en forkert løsning imod Ole's lad være løsning. Ville jeg vælge Ole's. Evt. kaste en position:fixed; samt top og bottom definering på henholdsvis top og bund elementet (betinget via. > selectoren) og så også via. > selectoren vise/skjule to div space elementer. Men jeg ville nok stadig lade være og holde mig til forsvindende top/bund headers - det giver lidt mere plads til indhold, men hver sin holdning joh :).

Bjawnie> Kan du evt. forklare hvor Dave's forslag viser sig som at være en midtercontent sektion havende en højde på 100%-160px-30px ? Den eneste jeg kan se derinde er en almindelig height 100% implementering ...
Avatar billede olebole Juniormester
11. februar 2009 - 09:16 #27
bjawnie >> Når du har læst spørgsmålet, kan jeg ikke forstå, du kan mene, at Dave Wood's løsning kommer bare i nærheden af en løsning på spørgerens problem.
Den eneste udfordring overhovedet ligger i ordet 'resten' - og det kommer han ikke med nogen somhelst løsning på.

Den bedste løsning er således stadig: Lad være  ;o)
Avatar billede bjawnie Nybegynder
11. februar 2009 - 10:38 #28
Man har tre layers. Top, Content og Footer.

Så sætter man Content til 100% height, smider Top ind i Content og slutteligt kommer Footeren så til at ligge udenfor som dødvægt.
Avatar billede olebole Juniormester
11. februar 2009 - 10:44 #29
Don't tell us ... show us!  ;o)
Avatar billede mclemens Nybegynder
11. februar 2009 - 12:12 #30
To muligheder, ingen ville jeg anbefale.

1. mulighed slår fejl ved: Fikseret top,
manglende understøttelse af IE <7, højden
på mellemdelen er ikke 100% - 160px - 30px.

2. mulighed slår fejl ved: Højden på
mellemdelen er ikke 100% - 160px - 30px.

1'eren minder om:  #26. 2'eren minder om: #13.
(kilde: http://www.eksperten.dk/spm/732203 m.v.)
Tilslutter mig også Ole: Det ville være rart
at se en rigtig 100% -x antal px. løsning.


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

<style type="text/css">
html,body {margin:0;padding:0;}
#main {width:980px;background:#555;margin:0 auto;position:relative;}

#backdrop {background:#555;position:absolute;top:0;height:100%;width:980px;left:50%;margin-left:-490px;}
#top{height:30px;background:#888;width:980px;}
#bund{height:160px;background:#aaa;width:980px;}
#topspc{display:none;height:30px;width:980px;}
#bundspc{display:none;height:160px;width:980px;}

#main > #top {position:fixed;top:0;}
#main > #bund {position:fixed;bottom:0;}
#mellem > #bundspc,#mellem > #topspc {display:block;}
</style>

</head><body><div id="backdrop">&nbsp;</div><div id="main">
<div id="top">TOP DIV</div>
<div id="mellem"><div id="topspc">&nbsp;</div>
MELLEM DIV<br>MELLEM DIV<br>MELLEM DIV<br>MELLEM DIV<br>MELLEM DIV<br>MELLEM DIV<br>MELLEM DIV<div id="bundspc">&nbsp;</div></div>
<div id="bund">BUND DIV</div>
</div></body></html>



...

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

<style type="text/css">
html,body {margin:0;padding:0;height:100%;}
#main {width:980px;background:#555;margin:0 auto;position:relative;height:100%;}
body > #main {height:auto;min-height:100%;}
#topspc {height:30px;clear:both;}
#bundspc{height:160px;clear:both;}

#top {height:30px;width:100%;background:#aaa;position:absolute;top:0;}
#bund {height:0;clear:both;position:relative;}
#bunden {height:160px;background:#aaa;position:absolute;bottom:0;width:980px;margin-left:-490px;left:50%;}
</style>

</head><body><div id="main"><div id="top">TOP DIV</div><div id="topspc">&nbsp;</div>
hmm1<br>hmm<br>hmm<br>hmm<br>hmm<br>hmm<br>hmm<br>hmmslut
<div id="bundspc">&nbsp;</div></div><div id="bund"><div id="bunden">BUND DIV</div></div></body></html>
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 07:53 Kan jeg lave en "søg og erstat" i databasen Af a3-seo.dk i MySQL
27/1211:30 Ændre det aller første billed, man ser ? Før man skriver koden (Windows 11) ... Af Ikke-ekspert i Windows
27/1210:47 NUM. tastatur og pc indbygget mus virker ikke. Af arnepedersen i Excel
27/1204:32 Korrupt CF kort Af Mozcan i Foto & video
26/1221:34 install.esd og boot.wim Af sjass i Windows
White papers
Flere white papers »


Premium
Teaser billede
Ny leverandør har netop underskrevet kontrakt med Kombit om kæmpe dansk bibliotekssystem
Læs mere »
M365 Copilot kan blive hurtigere og billigere: Microsoft åbner for alternativer til OpenAI
Ny europæiske supercomputer med 14.000 GPU’er sætter danske Gefion til vægs: Skal bruges til at udvinde kulsort energi
Nye skatteregler for kryptovaluta udskydes: Vil påvirke 300.000 danskere
Se alle »
Computerworld
Teaser billede
Til næste år kommer iPhone 17 – og ifølge rygtestrømmene vil den byde på tre nyheder
Læs mere »
Her er dommen: Region Syddanmark skal betale historisk stor bøde for grove overtrædelser af GDPR
En af verdens største it-distributører dropper samarbejdet med Broadcom: Kunne ikke nå til enighed
Test: Endelig en videodørklokke i smart indpakning og performance, der matcher
Se alle »
CIO
Teaser billede
En af verdens største it-distributører dropper samarbejdet med Broadcom: Kunne ikke nå til enighed
Læs mere »
Vores vidensindsamling og demokratiske samtale påvirkes af helt lukkede beslutninger i en enkelt privat virksomhed
Den danske ungdom ser intet formål i at arbejde med it
Tivoli søger ny CIO: Kenneth Hartvig stopper efter tre år på posten
Se alle »
Job & Karriere
Teaser billede
Microsoft klar med ny direktion for den danske forretning: Her er de nye direktører
Læs mere »
Merete Søby klar med nyt top-job efter pludselig exit fra Schultz: Her er hendes nye job
Linus Torvalds giver russiske Linux-udviklere sparket: Vil ikke have noget med dem at gøre
Dansk headhunter: Dette spørgsmål bliver jeg næsten altid stillet, når jeg forsøger at rekruttere it-folk
Se alle »
White paper
Teaser billede
Beskyt virksomheden mod trusler – og hold ressourceforbruget nede
Læs mere »
Sæt turbo på din cloudperformance og minimér risikoen for DDoS-angreb
Sådan: Én løsning til compliance, sikkerhed og overblik
Sikkerhed uden grænser: Cisco Hypershield
Se alle »

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