Div che non si adatta alla dimensione del contenitore...eppure dovrebbe

**e-tip** · 14-12-2009, 13:36

Salve a tutti, scrivo nel forum perchè sono giorni che sto cercando di risolvermi un problema e dopo aver googlato in lungo e largo , provando e riprovando le soluzioni trovate, non combino a risolvere

Ho una pagina html molto semplice che ha questo codice

codice:

<!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="it" lang="it"> 
	<head> 
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
	<title>Test Page</title> 
	<script type="text/javascript" src="/js/mootools-core.js"></script> 
	<script type="text/javascript" src="/js/menu.class.js"></script> 
	<script type="text/javascript"> 
		window.addEvent('load',function(){
			initialize();
		});
		function initialize(){
			a = new Menu(0);
		}
	</script> 
	<link rel="stylesheet" type="text/css" href="/css/main.css" /> 
	</head> 
	<body> 
		<div id="full_page"> 
			<div class="header_white"> 
	[img]/images/logo.png[/img] 
</div> 
<div class="menu_bar"> 
	

PTest Page</p> 
	<ul> 
		<li class="active first menu-element">Home Page 
		<li class="active inactive second menu-element">Photo Gallery 
		<li class="third inactive menu-element">Dove siamo 
		<li class="inactive menu-element last">Contattaci 
	[/list]
</div> 
<div class="clearer"></div> 
			<div class="center"> 
	adsdsdsada
</div> 
						<div class="footer"> 
	

This is footer</p> 
</div>		</div> 
	</body> 
</html>

Il div con classe center nelle mie intenzioni dovrebbe estendersi fino all'inizio del footer ma , pur avendo seguito i consigli trovati nei siti , non funziona.
Qualcuno ha qualche idea o vede qualche errore che mi è sfuggito ?

codice:

html,body{margin: 0;padding:0;height:100%;	font-family:"Myriad Pro" , Arial, Helvetica, sans-serif ;}

* {
	margin : 0;
	padding : 0;
}

div#full_page{
	position:relative;
	width: 760px;
	height: auto !important;
	height: 100%;
	margin: 0 auto;
    text-align: left;
	border-left: 2px solid #36c;
	border-right: 2px solid #36c
}

body>div#full_page{
	min-height:100%
}


.header_white {
	min-height : 100px;
	height: 18%;
}

.header_white img {
	margin : 60px 0 10px 5px;
	position : relative;
}

.menu_bar {
	background:#1f549f url("/images/background-menu.png") repeat-x;
	min-height:62px;
	color : white;
	height : 62px;
	position:relative;
	margin-bottom : 10px;
}

.menu_bar p {
	padding-top:30px;
	margin-left:10px;
	width : 35%;
	float:left;
}

.menu_bar ul {
	padding-top:26px;
	float : right;
	overflow: hidden;
	position : relative;
	color : #1f549f;
}

li.active {
	background: transparent url("/images/left_corner.png") no-repeat;
	position: relative;
	float:left;
	height : 27px;
	min-width : 50px;
	width : 150px;
	list-style:none;
	list-style-position : inside;
}

li.inactive{
	background: transparent url("/images/left_corner_inactive.png") no-repeat;
	position: relative;
	float:left;
	color : #DDD;
	height : 27px;
	min-width : 50px;
	width : 150px;
	list-style:none;
	list-style-position : inside;
}

li.active a {
	padding-top : 4px;
	height : 27px;
	width : 115px;
	float:right;
	color:#1f549f;
	text-decoration:none;
	background: transparent url("/images/main_menu_body_background.png") no-repeat;
	min-height:27px;
	outline: none;
}
li.inactive a {
	padding-top : 4px;
	height : 27px;
	width : 115px;
	float:right;
	color:#1f549f;
	text-decoration:none;
	background: transparent url("/images/main_menu_body_background_inactive.png") no-repeat;
	min-height:27px;
}

.active div{
	z-index:50;
}

li {
	margin-right : -40px;
}
.last {
	margin-right : -13px;
}


.left_indicator {
	background: transparent url("/images/left_corner.png") no-repeat;
	float:left;
	width : 35px;
	height : 27px;
}

.main_menu_body{
	padding-top : 4px;
	height : 27px;
	width : 115px;
	float:right;
	background: transparent url("/images/main_menu_body_background.png") repeat-x;
}
.clearer {
	clear : both;
}

.center{
    height:100%;
    background:red;
}
body>#full_page>.center{
    height: auto;
    min-height: 100%;
}

.footer {
	color: #000;
	text-align:center;
	height : 28px;
	background:transparent url("/images/background-footer.png") repeat-x;
	position : absolute;
	width : 100%;
	bottom : 0;
	font-family:"Myriad Pro" , Arial, Helvetica, sans-serif ;
	color : white;
}
.footer p{
	padding-top:4px;
}

#fadeArea {
	text-align : center;
}

#map {
	height : 400px;
	width : 500px;
}

#info_location {
	float:left;
	width : 30%;
	margin-left:5px;
}
.top {
	background: transparent url("/images/map_border.png") no-repeat 0 0;
	padding : 5px 0 0 5px;
	width : 510px;
	height : 410px;
	float:right;
}

#map div span {
	display:none;
}

.categories_main_container{
	width :250px;
	border : thin solid black;
	float:left;
}
.categories_container_center {
	width : 68%;
	float:left;
	text-align : center;
}
.categories_container_right , .categories_container_left {
	width : 15%;
	float:left;
}

Grazie a tutti

**spadescience** · 15-12-2009, 16:17

Il 100% è rispetto al genitore, in questo caso il genitore è div "#full_page".
Dai una altezza a "#full_page" e ".center" avrà la sua stessa altezza.

**e-tip** · 15-12-2009, 16:58

Ottimo !
Grazie mille

Discussione: Div che non si adatta alla dimensione del contenitore...eppure dovrebbe

Strumenti discussione

Ricerca discussione

Visualizza

Div che non si adatta alla dimensione del contenitore...eppure dovrebbe

Permessi di invio