CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

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%?

Synes godt om

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>

Synes godt om

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

Synes godt om

olebole Juniormester

10. februar 2009 - 14:25 #3

jannek_ek >> Det gør det helt sikkert ikke =)

Synes godt om

skwizie Nybegynder

10. februar 2009 - 14:26 #4

jannek_ek -> hmmm, det ser ikke lige ud til at virke

Synes godt om

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

Synes godt om

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

Synes godt om

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 =)

Synes godt om

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)

Synes godt om

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.

Synes godt om

skwizie Nybegynder

10. februar 2009 - 14:40 #10

olebole -> nej, det har du selvfølgelig ret i :)

Synes godt om

skwizie Nybegynder

10. februar 2009 - 14:41 #11

jeg anvender bare et andet design.. det skal være rigtigt fra start af :0)

Synes godt om

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

Synes godt om

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 ...

Synes godt om

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 :)

Synes godt om

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 :)

Synes godt om

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>

Synes godt om

olebole Juniormester

10. februar 2009 - 15:04 #17

Kommer her =)

Synes godt om

jannek_ek Nybegynder

10. februar 2009 - 15:13 #18

@olebole
Lækkert, det border problem er et jeg har kæmpet med før :)

Synes godt om

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

Synes godt om

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"'

Synes godt om

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

Synes godt om

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.

Synes godt om

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)

Synes godt om

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!

Synes godt om

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.

Synes godt om

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 ...

Synes godt om

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)

Synes godt om

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.

Synes godt om

olebole Juniormester

11. februar 2009 - 10:44 #29

Don't tell us ... show us! ;o)

Synes godt om

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"> </div><div id="main">
<div id="top">TOP DIV</div>
<div id="mellem"><div id="topspc"> </div>
MELLEM DIV<br>MELLEM DIV<br>MELLEM DIV<br>MELLEM DIV<br>MELLEM DIV<br>MELLEM DIV<br>MELLEM DIV<div id="bundspc"> </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"> </div>
hmm1<br>hmm<br>hmm<br>hmm<br>hmm<br>hmm<br>hmm<br>hmmslut
<div id="bundspc"> </div></div><div id="bund"><div id="bunden">BUND DIV</div></div></body></html>

Synes godt om

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.

Følg dette spørgsmål

Opret Preview

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
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML	3	19/03/202522:16	20/03/202513:04
Se og ændre html på en webside Af magger i HTML	4	11/03/202513:55	12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML	5	02/03/202520:05	04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML	3	30/10/202409:37	01/01/202515:27
Aldersbegrænsning på min hjemmeside Af ØLMANDEN i HTML	3	29/09/202410:58	20/03/202513:38

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.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS