div height 100%

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

23/04/2005 15:13:00
Quote Anchor link
Ik ben bezig met een site compleet met CSS en DIV's alleen nu heb ik een probleem. Ik heb een 'grote' div met daarin een div voor het menu en eentje voor de content. Alleen nu wil ik dat die grote div automatisch zo'n height krijgt dat alle content erin past. In IE doet hij dit gewoon alleen in FF niet. Iemand een idee?
 
PHP hulp

PHP hulp

22/02/2025 16:09:36
 
Jelmer -

Jelmer -

23/04/2005 15:15:00
Quote Anchor link
Heb je een voorbeeldje van het probleem?
edit: en oja, probeer eens display:block; in de style van je div. Werkt vaak als oplossing voor verschillende problemen (en maakt er ook weer een paar)
Gewijzigd op 23/04/2005 15:16:00 door Jelmer -
 
Willem

Willem

23/04/2005 15:20:00
Quote Anchor link
Je moet een div onder het menu en de content in de hoofd-div maken. De nieuwe div geef je in css clear: both; Dan moet het werken!
 

23/04/2005 15:41:00
Quote Anchor link
Gewoon zo:

height: auto;

dacht ik
 

23/04/2005 16:01:00
Quote Anchor link
Dank je wel, het werkt nu. Alleen ik krijg weer een paar andere problemen. In IE laat hij sommige stukjes van de border van de div met content niet zien. Steeds als ik op Vernieuwen klik weer een ander stukje. Echt vaag.

Verder zou ik ook graag hebben dat het menu de hele hoofd div vult. Ik heb het eerst gewoon geprobeert met height: 100%. Maar dit deed hij alleen in IE en nu helemaal niet meer.
 

23/04/2005 16:04:00
Quote Anchor link
height: auto doet het alleen in IE, niet in FF
 
Onbekend onbekend

onbekend onbekend

23/04/2005 16:54:00
Quote Anchor link
Ik ken het probleem, vele uren werk aan gehad, maar ook ik heb geen oplossing gevonden.... als iemand het weet?
 
Ro-G :o)

Ro-G :o)

23/04/2005 17:27:00
Quote Anchor link
Zet html{height:100%}
body{height:100%}


Dat je in IE stukjes rand niet ziet komt door een IE bug.
 

23/04/2005 17:31:00
Quote Anchor link
Dit heb ik ook al geprobeerd maar het werkt echt niet
 
Ro-G :o)

Ro-G :o)

23/04/2005 17:37:00
Quote Anchor link
ronaldo:
Dit heb ik ook al geprobeerd maar het werkt echt niet


Erg vreemd ja.

Bekijk de volgende site en css eens. Daar werkt het namelijk wel.

Site
css
 

23/04/2005 18:18:00
Quote Anchor link
ja ik zie het alleen bij mij doet hij het niet. Zo ziet het er nu uit:
<html>
<head>
html { padding:0px;
margin-left:auto;
margin-right:auto;
height:100%;
}
body {
margin-left: auto;
margin-right:auto;
height: 100%;
}
.container { width:760px;
height: auto;
margin-left: auto;
margin-right:auto;
padding-left: 0px;
}
.menu {
width: 155px;
height: 100%;
float:left;
background-color: #000000;
}

.menu ul{
margin-left: 0px;
padding-left: 0px;
margin-top: 0px;
margin-bottom: 0px;
}
.menu li a{ width: 153px;
display: block;
margin-top: 0px;
margin-bottom: 0px;

}


.content {
width: 572px;
float: left;
}
.content2{
padding-bottom: 10px;
padding-left: 10px;
padding-top: 10px;
}
.footer { width: 100%;
margin-top: 5px;
margin-left: auto;
margin-right:auto;
font-size: 10px;
float:left;
}

.tekst { float:left;
width: 345px;
}
.img { float:right;
width: 210px;
}


</style>
</head>

<body>

<div class="container">
<img src="logo5.jpg">
<div style="float: left; width: 156px;">Menu</div>
<div style="float:left; width: 573px; ">Home</div>

<div class="menu">

<ul>
<li>
<a href="#">Hier komt het menu</a>
</li>

</ul>

</div>
<div class="content">
<div class="content2">
<div class="tekst">
hier komt tekst
</div>
<div class="img">
hier komen foto's
</div>

<div style="clear: both; "></div>
</div>
<div style="clear: both; "></div>
</div>
<div class="footer">Footer</div>

<div style="clear: both; "></div>
</div>

</body>
</html>
 
Ro-G :o)

Ro-G :o)

23/04/2005 19:02:00
Quote Anchor link
Je bent wel niet consequent hé.

Of je defineerd alles in een css, of in de HTML maar niet alles door mekaar.

Waarom gebruik je geen id's om je div's te benoemen?

<div id="container"></div>

In je css is dit dan

#container{...}
 

23/04/2005 19:23:00
Quote Anchor link
Ach die twee regeltjes, ik ga alles toch nog in een in een externe stylesheet zetten, het moet alleen eerst even werken.

en class of id maakt toch niks uit.
 

23/04/2005 19:49:00
Quote Anchor link
werkt *% niet ?
of kraam ik nu iets heel belachelijks uit ?
 
Mitch X

Mitch X

23/04/2005 19:58:00
Quote Anchor link
Bovenin mist <style> ;)
<html>
<head>
[red]<style>[/red]
BLAAT!
</style>
</head>
 

23/04/2005 20:07:00
Quote Anchor link
ja die style heb ik wel alleen was ik vergeten hier erbij te zetten
 
Jordi

Jordi

23/04/2005 23:52:00
Quote Anchor link
Ro-G:
ronaldo:
Dit heb ik ook al geprobeerd maar het werkt echt niet


Erg vreemd ja.

Bekijk de volgende site en css eens. Daar werkt het namelijk wel.

Site
css


Alleen volgens mij werkt het hier alleen maar, omdat de container height: 500px heeft. Als je wilt dat die hoogte variabel is, heb je toch nog een probleem.
 
Willem

Willem

24/04/2005 02:08:00
Quote Anchor link
Als je het menu even hoog wilt hebben als de content kun je met een wrapper werken. Je hebt 1 div met het menu en de content. Bij die div zet je een achtergrondplaatje zoals het menu en de content eruit zien. Bijvoorbeeld links 100 px blauw en rechts 500 px oranje. Zo lijkt het alsof het menu doorloopt terwijl je het achtergrondplaatje ziet!
 

24/04/2005 13:27:00
Quote Anchor link
ja ik denk dat dat de enige manier is om het op te lossen. Zal het proberen
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.