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

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 22:10 Computer til videoredigering og casual gaming Af Kean BS i PC
I går 15:50 Link cvs fil til Excel Af per2edb i Excel
I går 13:15 Microsoft 365 personel Af ejgil703 i E-mail programmer
I går 08:43 USB strømforsyning til PD 5V/2.4A eller 9V/3A Af Joakim i Andet hardware
11/0721:07 Office-programmer lukker ned ved opstart Af Morten i Office & Kontorpakker
White papers
Flere white papers »


Premium
Teaser billede
Microsoft udskyder vigtig ændring for partnerne: Får tre måneder mere, ellers falder hammeren
Læs mere »
Fremadstormende Conscia i nyt gigantopkøb – bliver det største i selskabets historie
Itm8 kæmper med blødende bundlinje og skuffende salg: "Ikke tilfredsstillende"
Denne 37-årige russiske hackerkonge har flået adskillige danske virksomheder – og har tjent styrtende på det
Se alle »
Computerworld
Teaser billede
Hackerne slog til mod Humac – direktøren skiftede forklaring på en uge: Nu flyder pas frit på nettet
Læs mere »
Verdens største it-distributør ramt af ransomware: VPN mistænkt som indgang
Elon Musks nye AI-model Grok 4 er hundedyr – men den fejer alle konkurrentere af banen i ny analyse
Test: Endelig et OLED-tv, der giver dig masser af lys og power
Se alle »
CIO
Teaser billede
Kæmpe it-distributør er tilbage i drift efter ransomware-angreb: "Har arbejdet døgnet rundt"
Læs mere »
Borgere kunne læse andres beskeder i Digital Post: Nu får Digitaliseringsstyrelsen kras kritik for mangler i sikkerheden
En af landets dygtigste CISO'er stopper i Arla: Thomas Zuliani har fået nyt job
Banedanmark skal have ny CISO: Derfor kvitter Morten Pedersen sin stilling
Se alle »
Job & Karriere
Teaser billede
It-chef og halv it-afdeling fyret i forsikringsselskab på grund af kommentar om potteplante
Læs mere »
Danske it-folk tør ikke længere skifte job hele tiden - og det er der en særlig årsag til
Itm8 fyrer: Opsiger ansatte og reorganiserer
Fagforbund slår alarm over Netcompany: "Man risikerer at knække halsen på deres arbejdsmiljø"
Se alle »
White paper
Teaser billede
Tidsbegrænset kampagne: Overvejer du at udskifte eller tilføje printere i din forretning? Vi kan tilbyde én eller flere maskiner gratis
Læs mere »
IT i front: Sådan bliver netværk en strategisk driver
Sikkerhed gjort enkelt: Beskyt din virksomhed direkte i browseren
Sådan får du reel værdi ud af Microsoft Copilot
Se alle »

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