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 23:45 Råd om køb af gaming pc til ca. 7.0000 kr. Af kurtba i PC
I går 22:33 Thunderbird starter først lydfil ved manuel åbning. Af valby i E-mail programmer
I går 15:04 Bluetooth 5.2 Af Peter Olsen i Mobiltelefoner
I går 13:38 Valg af harddisk til Samsung TV Af OeNP i Fjernsyn & projektorer
31/0714:26 Nyligt bygget computer slukkede efter 20 minutters funktionalitet Af Xerify i PC
White papers
Flere white papers »


Premium
Teaser billede
ChatGPT slået af tronen: Ikke længere virksomhedernes foretrukne AI-værktøj
Læs mere »
Nvidias danske afdeling boomer: Over 100 ansatte og fordoblet overskud
Dropbox lukker sin passwordmanager: Brugere skal hente adgangskoder, inden de bliver slettet
I løbet af få timer torsdag blev Microsoft tusind milliarder kroner mere værd: Runder som blot andet selskab nogensinde markant milepæl
Se alle »
Computerworld
Teaser billede
Din iPad bliver nu (næsten) en Mac - men Apple insisterer på, at den stadig er en iPad
Læs mere »
Microsoft stopper support til Windows 11-version om få måneder
Amazon er verdens næststørste private arbejdsgiver: Overgåes kun af et selskab på jorden
Guide og test: Sådan får du fuld WiFi 7-dækning af et lille firma eller et større hus - både inde og ude
Se alle »
CIO
Teaser billede
Jonas Frank Johannesen fratræder som it-direltør i Velux efter 'konstruktiv dialog' med sin chef
Læs mere »
Europæiske cloud-udbydere kræver Broadcoms opkøb af VMware annulleret: Hiver EU-Kommissionen i retten
Microsoft dropper support af M365-programmer, der er installeret gennem Microsoft Store: Se om din version bliver forældet
Microsoft-chef under ed: Ingen garanti for, at europæriske data ikke udleveres til USA
Se alle »
Job & Karriere
Teaser billede
Danske it-folk tør ikke længere skifte job hele tiden - og det er der en særlig årsag til
Læs mere »
Itm8 fyrer: Opsiger ansatte og reorganiserer
Lille dansk it-virksomhed fra Vanløse lander drømmekontrakt, der rækker langt ind i stifterens pension
Larry Ellison er blevet 165 milliarder kroner rigere på få timer: Er nu pludselig verdens næstrigeste mand
Se alle »
White paper
Teaser billede
IT i front: Sådan bliver netværk en strategisk driver
Læs mere »
Gør din backup til et aktiv i cybersikkerhedsindsatsen
Sådan samler du virtualisering og containerdrift i én løsning
Revolutionér kundeoplevelsen med AI og automatisering
Se alle »

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