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

lasseq Nybegynder

21. oktober 2007 - 21:15 Der er 7 kommentarer og
1 løsning

Gør container til height: 100%

Hej

Jeg har fundet et eksempellayout på siden
http://css.alsacreations.com/modeles/modele11.htm

Jeg har bakset MEGET med en ændring i CSS'et, så højden på containeren bliver 100%, dvs. top-bjælken og bunden skal være faste, mens menu og frame-div'en skal udfylde resten. Det er stadig frame-diven der skal have scrollbaren - ikke siden.

Jeg vedhæfter den originale kildekode for en god ordens skyld:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>4 zones avec scroll</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">

</style>
</head>

<body>
<div class="conteneur">
<div class="header">contenu du header de taille fixe : 750px <a href="http://css.alsacreations.com/Modeles-de-mise-en-page-en-CSS">(voir tous les modèles)</a>

</div>

<div class="menu"><p>menu gauche de largeur fixe : 150px</p>

<ul class="menugauche">
<li><a href="">Menu 1</a></li>
<li><a href="">Menu 2</a></li>
<li><a href="">Menu 3</a></li>
<li><a href="">Menu 4</a></li>

</ul>

</div>
<div class="frame">
<p>partie "frame" scrollable </p>
<p>partie "frame" scrollable </p>
<p>partie "frame" scrollable </p>
<p>partie "frame" scrollable </p>

<p>partie "frame" scrollable </p>
<p>partie "frame" scrollable </p>
<p>partie "frame" scrollable </p>
<p>partie "frame" scrollable </p>
<p>partie "frame" scrollable </p>
<p>partie "frame" scrollable </p>

<p>partie "frame" scrollable </p>
<p>partie "frame" scrollable </p>
<p>partie "frame" scrollable </p>
<p>partie "frame" scrollable </p>
<p>partie "frame" scrollable </p>
<p>partie "frame" scrollable </p>

<p>partie "frame" scrollable </p>
<p>partie "frame" scrollable </p>
<p>partie "frame" scrollable </p>
<p>partie "frame" scrollable </p>
<p>partie "frame" scrollable </p>
<p>partie "frame" scrollable </p>

<p>partie "frame" scrollable </p>
<p>partie "frame" scrollable </p>
<p>partie "frame" scrollable </p>
<p>partie "frame" scrollable </p>
<p>partie "frame" scrollable </p>
<p>partie "frame" scrollable </p>

<p>partie "frame" scrollable </p>
<p>partie "frame" scrollable </p>
<p>partie "frame" scrollable </p>
<p>partie "frame" scrollable </p>
<p>partie "frame" scrollable </p>
<p>partie "frame" scrollable </p>

<p>partie "frame" scrollable </p>
</div>

<div class="footer">contenu du footer de taille fixe :
750px </div>
</div>
</body>
</html>

Synes godt om

comodin Nybegynder

22. oktober 2007 - 23:37 #1

da jeg testede har jeg brugt lidt andre navne end det du har, så du må lige rette til hist og pist ;-)
men hvis jeg har forstået dit spørgsmål rigtigt så vil jeg mene dette passer.

noget lignende var oppe og vende for ikke så lang tid siden, hvor jeg så den måde jeg har positioneret på var...

CSS:
body {
margin:0;
padding:0;
width:100%;
height:100%;
background:#003366;
}

.cont {
margin:0;
padding:0;
width:100%;
position:absolute;
top:100px;
bottom:100px;
background-color:#336544;
}

.menu {
margin:0px;
padding:0px;
position:absolute;
top:0px;
left:0px;
bottom:0px;
width:150px;
background-color:#990066;
}

.frame {
margin:0;
padding:0;
position:absolute;
top:0px;
bottom:0px;
left:150px;
right:0px;
background-color:#666666;
overflow:auto;
}

.top {
position:absolute;
height:100px;
width:100%;
background-color:#33FFFF;
}

.bottom {
position:absolute;
bottom:0px;
height:100px;
width:100%;
background-color:#99FF00;
}

xhtml:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>test ting</title>
<link rel="stylesheet" type="text/css" href="asdf.css" />
</head>
<body>

<div class="top">top</div>
<div class="cont">
<div class="menu">
<ul>
<li>menu 01</li>
<li>menu 02</li>
<li>menu 03</li>
<li>menu 04</li>
<li>menu 05</li>
</ul>
</div>
<div class="frame">frame<br />frame<br />frame<br />frame<br />frame<br />frame<br />frame<br />frame<br />frame<br />frame<br />frame<br />frame<br />frame<br />frame<br />frame<br /></div>
</div>
<div class="bottom">bottom</div>

</body>
</html>

Synes godt om

lasseq Nybegynder

22. oktober 2007 - 23:58 #2

Hej

Mange tak for dit forslag. Det er næsten 100% rigtigt. Jeg ønsker en fixed bredde på 750px centreret. Hvordan tilpasser jeg nemmest siden til dette? Jeg ønsker at gøre footeren mindre (15 px), men siden tilpasser sig ikke efter dette. Hvad mangler jeg før det lykkes?

Kan du svare på de to ting, får du pointene

Synes godt om

comodin Nybegynder

23. oktober 2007 - 00:31 #3

ok har lavet en lille smule om så...

CSS:
body {
margin:0;
padding:0;
background:#003366;
}

.center {
width:750px;
height:100%;
margin-left:auto;
margin-right:auto;
}

.cont {
margin:0;
padding:0;
width:750px;
position:absolute;
top:100px;
bottom:20px;
background-color:#336544;
}

.menu {
margin:0px;
padding:0px;
position:absolute;
top:0px;
left:0px;
bottom:0px;
width:150px;
background-color:#990066;
}

.frame {
margin:0;
padding:0;
position:absolute;
top:0px;
bottom:0px;
left:150px;
right:0px;
background-color:#666666;
overflow:auto;
}

.top {
position:absolute;
height:100px;
width:750px;
background-color:#33FFFF;
}

.bottom {
position:absolute;
bottom:0px;
height:20px;
width:750px;
background-color:#99FF00;
}

xhtml:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>test ting</title>
<link rel="stylesheet" type="text/css" href="asdf.css" />
</head>
<body>

<div class="center">
<div class="top">top</div>
<div class="cont">
<div class="menu">
<ul>
<li>menu 01</li>
<li>menu 02</li>
<li>menu 03</li>
<li>menu 04</li>
<li>menu 05</li>
</ul>
</div>
<div class="frame">frame<br />frame<br />frame<br />frame<br />frame<br />frame<br />frame<br />frame<br />frame<br />frame<br />frame<br />frame<br />frame<br />frame<br />frame<br /></div>
</div>
<div class="bottom">bottom</div>
</div>

</body>
</html>

Synes godt om

comodin Nybegynder

23. oktober 2007 - 00:46 #4

btw, satte footeren til 20px, da den default font jeg har brugt går "udover" 15px...
hvis du stadig vil have 15px i footer skal du bare rette det til i css under .cont og .bottom, og der efter evt. rette font til korrekt str.
;-)

Synes godt om

lasseq Nybegynder

23. oktober 2007 - 00:49 #5

Perfekt! Tusind tak. Du ved ikke hvor meget jeg har bøvlet med dette problem! Post et svar så får du point :D

Synes godt om

comodin Nybegynder

23. oktober 2007 - 00:52 #6

godt at høre at det virker ;-)

Synes godt om

comodin Nybegynder

24. oktober 2007 - 09:41 #7

du sender bare point denne vej når det er ik'? ;-)

Synes godt om

lasseq Nybegynder

24. oktober 2007 - 12:44 #8

Selvfølgelig :D

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

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS