Dynamische hoogte in divs

[ROL]

Hallo luitjes,

Ik ben een template aan het maken voor Joomla (CMS). Joomla haalt de content uit de sql database. Omdat het ene artikel langer is dan het andere wil ik dat de div waarin de content gepubliceerd wordt dynamisch is (heb een hekel aan scrollen binnen een pagina).

Ik heb een container gemaakt met daarin een div voor een achtergrondje, en div voor een submenu en een div voor de content. Als ik de hoogte van deze div (container) instel op 100%, dan pakt ie als hoogte 100% van het scherm en dan stopt de conatiner, terwijl het artikel door gaat. Hoe krij ik het voor elkaar dat de div de minimale hoogte heeft van het scherm en de maximale hoogte van het artikel.

Ik heb in de index.php alleen div's met id's en de php om de joomla elementen aan te roepen, alle grafische eigenschappen heb ik in een css vastgelegd. Hier het het gedeelte uit de css:

div#container_content {
	position:absolute;
	background-color:#333333;
	width:570px;
	min-height:100%;
	margin:	324px 0px 0px 20px;
}

div#content_top {
	height:20px;
	width:570px;
	margin: 0px 0px 0px 0px;
	background-image:url(../images/main_top_bg.png);
	background-repeat:repeat-x;
	background-position:top ;
	z-index:3;
}

div#content_menu {
	margin:	10px 0px 0px 0px;
}

div#content_text {
	position:absolute;
	display:block;
	float:left;
	text-align:left;
	z-index:2;
	margin: 30px 20px 20px 20px;
	width:530px;
	color:#CCCCCC;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:10px;
	z-index:4;
}

div#content_bottom {
	height:20px;
	background-image:url(../images/bottom_image_layer.png);
	background-repeat:repeat-x;
	background-position:bottom ;
	background-color:#333333;
}

En de totale css:

body,html {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	background-color:#CCCCCC;
	color:#FF6600;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:9px;
}

a:link {
	font-weight: bold;
	color:#FF6600;
	text-decoration:none;
}

a:visited {
	font-weight:bold;
	color:#FF6600;
	text-decoration:none;
}

a:hover {
	font-weight:bold;
	color:#FF9900;
	text-decoration:underline;
}

.clr {
	clear: both;
}

div#container {
	position:absolute;
	width:810px;
	min-height:50%;
	left:50%;
	margin-left:-405px;
	z-index:5;
	background-image: url(../images/bg.png);
	color:#CCCCCC;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:10px;
	z-index:1;
	
}

div#flash {
	position:absolute;
	float:left;
	height:500px;
	width:570px;
	margin: 0px 0px 0px 20px;
	z-index:5;
}

div#header {
	position:absolute;
	top:0px;
	left:590px;
	width:200px;
	height:127px;
	background-color:#CCCCCC;
	z-index:4;
}

div#container_content {
	position:absolute;
	background-color:#333333;
	width:570px;
	min-height:100%;
	margin:	324px 0px 0px 20px;
}

div#content_top {
	height:20px;
	width:570px;
	margin: 0px 0px 0px 0px;
	background-image:url(../images/main_top_bg.png);
	background-repeat:repeat-x;
	background-position:top ;
	z-index:3;
}

div#content_menu {
	margin:	10px 0px 0px 0px;
}

div#content_text {
	position:absolute;
	display:block;
	float:left;
	text-align:left;
	z-index:2;
	margin: 30px 20px 20px 20px;
	width:530px;
	color:#CCCCCC;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:10px;
	z-index:4;
}

div#content_bottom {
	height:20px;
	background-image:url(../images/bottom_image_layer.png);
	background-repeat:repeat-x;
	background-position:bottom ;
	background-color:#333333;
}

div#right_white_grey {
	display:block;
	float:bottom;
	background-position:bottom ;
	height:40px;
	background-repeat:repeat-x;
	background-image:url(../images/bottom_image_layer.jpg);
}

div#footer {
	display:block;
	font-size:10px;
	color:#CCCCCC;
	height:30px;
	vertical-align: bottom;
	background-color:#000000;
}

div#right {
	position:absolute;
	float:right;
	top:127px;
	left: 590px;
	width:200;
	color:#333333;
	overflow:hidden;
}

h1, h2, h3, h4, h5, h6 {
	font-family: Arial,Helvetica,sans-serif;
	font-weight: bold;
	padding-bottom: 0px;
	margin-bottom: 5px;
	line-height: 100%;
}

h1 {
	font-size: 175%;
	font-weight: normal;
	color: #FF9900;
}

h2 {
	font-size: 150%;
	color: #FF9900;
}

h3 {
	font-size: 140%;
	color: #FF9900;
}

h4 {
	font-size: 130%;
	font-weight: normal;
	color: #FF9900;
}

h5 {
	font-size: 120%;
	color: #FF9900;
}

h6 {
	font-size: 110%;
	color: #FF9900;
}

div#search {
	margin: 2px 2px 2px 2px ;
	float:right;
}

/** menu **/
a.mainlevel:link, a.mainlevel:visited {
	display: block;
	font-size: 11px;
	vertical-align: middle;
	text-align: left;
	text-decoration: none;
	font-weight: normal;
	color:#333333;	
	width: 150px;
	height: 57px;
	line-height:57px;
	margin-bottom:0px;
	border-bottom: 0px solid #ffffff;
	padding-left: 50px;
	background: url(../images/button.gif);							
}

a.mainlevel:hover {
	display: block;
	font-size: 11px;
	vertical-align: middle;
	text-align: left;
	text-decoration: underline;
	font-weight: normal;
	color: #000000;
	width: 180px;
	height: 57px;
	line-height:57px;
	margin-bottom:0px;
	border-bottom: 0px solid #ffffff;
	padding-left: 20px;
	background: url(../images/button_hover.gif);
	
}

a.mainlevel#active_menu {
	display: block;
	font-size: 11px;
	vertical-align: middle;
	text-align: left;
	text-decoration: none;
	font-weight: bold;
	color: #000000;
	width: 150px;
	height: 57px;
	line-height:57px;
	margin-bottom:0px;
	border-bottom: 0px solid #ffffff;
	padding-left: 50px;
	background: url(../images/button_hover.gif);
}

a.mainlevel#active_menu:hover {
 display: block;
	font-size: 11px;
	vertical-align: middle;
	text-align: left;
	text-decoration: none;
	font-weight: bold;
	color: #000000;
	width: 180px;
	height: 57px;
	line-height:57px;
	margin-bottom:0px;
	border-bottom: 0px solid #ffffff;
	padding-left: 20px;
	background: url(../images/button_hover.gif);
 }

NB: Dit is mijn eerste keer zonder tabel en met css.

Thanx for helping!

 

[ROL]

Niemand?

 

[ErickD]

Gelijke hoogte Div's

Hoi,

|k loop nu ook tegen datzelfde probleem aan. Heeft iemand een suggestie hoe ik dat kan oplossen? Ik wil niet werken met een achtergrondafbeelding die het laat lijken of er doorlopende kolommen zijn.

Een tabel mag en heb dat ook al geprobeerd, maar zodra ik er div's in plaats om de Joomla!-codes aan te roepen, gaan de vier cellen (van een en dezelfde tabel) afhankelijk van elkaar oprekken (naar mate er meer info staat in de desbetreffende cel.

http://www.kvwmaasbree.nl/projects/basistemplatePHP-01.html

Iemand een idee?

 

[peter vazed]

Gooi:
min-height css
in google.

100% werkt inderdaad niet,
maar
min-height zou een oplossing kunnen brengen.

 

[ErickD]

Maar wordt de kolom dan evengoed niet langer dan de inhoud lang is? M.a.w. Passen de kolommen zich daarmee aan aan de langste kolom?

 

[peter vazed]

Maar wordt de kolom dan evengoed niet langer dan de inhoud lang is? M.a.w. Passen de kolommen zich daarmee aan aan de langste kolom?

Ik zou het niet weten.
Moet je gewoon proberen.

Het een en ander is afhankelijk van je opbouw,
dus de tabellen of divjes welke gebruikt worden.

Het is een goed idee om sommige items te voorzien van een border.
Dus:
#div1
{
border: solid #ff0000 1px;
rest van de style
}