Notifikationer

Markér alle som læst Log ud

nicolaib Praktikant

13. marts 2007 - 15:06 Der er 8 kommentarer og
1 løsning

Height-problem - Menucontainer 100% virker ikke

Jeg kan ikke få min container som indeholder en menu til at strække sig i hele sidens højde.
Containeren indeholder en <ul>nested menu (med java-fold ud). Jeg kan kun få den til at være passende hvis jeg sætter en fast pixelhøjde på menucontaineren. Da de forskellige sider ikke har samme indhold ønsker jeg at højden skal reguleres efter indholdet af siden - ikke efter en fast højde.
Hvis jeg sætter den til at være 100% så skrumper boxen til menuens højde.
Jeg har kigget en del tråde igennem uden at få svar.
Hvad er problemet?
På forhånd tak.

Synes godt om

olebole Juniormester

13. marts 2007 - 15:12 #1

<ole>

En relativ højde (f.eks. sat i procent) skal browseren beregne på baggrund af det omkransende elements højde - hvorfor denne explicit skal være sat. Det gælder hele vejen ud til dokument-elementet. Du skal med andre ord begynde din CSS med:

html, body {
height: 100%;
margin: 0;
padding: 0;
}

/mvh
</bole>

Synes godt om

olebole Juniormester

13. marts 2007 - 15:13 #2

- og så skal alle de andre elementer, der omkranser dit ul-element, have sat højder ;o)

Synes godt om

roenving Novice

13. marts 2007 - 15:14 #3

1. Skal du bruge relativ højde, skal det omkransende element have en defineret højde, er det omkransende element body, skal både html- og body-elementet have sat højden til 100%:

html,body{height:100%;margin:0;padding:0;}

2. Men har du også sider, der er højere end skærmhøjden, må du ud i noget javascript, hvis du skal give menuen samme højde som andre elementer !-)

-- men så kan man jo tage fat i det gamle trick: Sæt et element udenom alle dine elementer, og giv det den baggrund, du også bruger på menuen, så kan man ikke se, hvor lang den er !-)

Synes godt om

nicolaib Praktikant

14. marts 2007 - 02:14 #4

Jeg har faktisk prøvet de løsninger der bliver nævnt her (undtagen JavaScript -(ikke min stærke side)) og specielt det "ældgamle CSS-trick" som roenving beskriver det har jeg prøvet. Den omkapslende baggrund tager samme højde som menuen.
En gang prøvede jeg at fiksere det i bunden en anden gang bare at lægge det bagved, men fælles for forsøgene var, at jeg ikke kunne få dem til at ligge bagved menuen - lige meget hvordan jeg brugte z-index'es.
Jeg har
html, body, #main, #site, #menubox -> heri ligger boxen som indeholder menuen , ul ul og li for nested menu.
Menuboxen er floated til venstre. (som forsøg blev denne også indkapslet -> virkede ikke).Jeg forsøgte at indkapsle #menubox i #box men denne tog samme højde.

Kan der bruges noget min/max-height?
Er det her til nogen hjælp? Jeg synes jeg har prøvet det meste.

Synes godt om

roenving Novice

14. marts 2007 - 10:38 #5

Du kan se det her, borders er bare for at vise hvad der sker !-)

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Det gamle css-trick</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
html,body{height:100%;margin:0px;border:0px;padding:0px;font-family:tahoma,verdana,arial,sans-serif;font-size:small;}
#site{width:864px;margin:0 auto;background:red;border:5px solid green;}
#menu{width:260px;background:red;float:left;border:1px solid black;}
#content{width:600px;float:left;background:blue;border:1px solid black;}
.clearDiv{clear:both;font-size:0;line-height:0;}
</style>
</head>
<body>
<div id="site">
<div id="menu">
Her er menuen<br>
<a href="http://www.eksperten.dk/spm/767714">Gå til Eksperten-spørgsmålet</a>
</div>
<div id="content">
Indhold<br>
Indhold<br>
Indhold<br>
Indhold<br>
Indhold<br>
Indhold<br>
Indhold<br>
Indhold<br>
Indhold<br>
Indhold<br>
Indhold<br>
Indhold<br>
Indhold<br>
Indhold<br>
Indhold<br>
</div>
<div class="clearDiv"> </div>
</div>
</body>

</html>

Synes godt om

nicolaib Praktikant

17. marts 2007 - 18:13 #6

Jeg kan godt se princippet i ideen, så jeg håber det lykkes. Har ikke lige haft tid til at få givet det et forsøg, men så snart det er testet, skal jeg nok vende tilbage med point.

Synes godt om

nicolaib Praktikant

19. marts 2007 - 01:16 #7

Det endte med at lykkes om end det krævede en del arbejde. Dette rettede også siden så den fungerer i alle browsers jeg har prøvet.
Tak for hjælpen allesammen!
Pointene går til roenving!

Synes godt om

roenving Novice

19. marts 2007 - 01:26 #8

Velbekomme '-)

Synes godt om

roenving Novice

20. marts 2007 - 21:44 #9

-- og tak for point ;~}

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
Hjælp med HTML og CSS Af Nojsa i HTML	18	10/09/202515:07	17/09/202515:11
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

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