[RISOLTO] Struttura pagina con HTML5 e CSS

Jakub Lemiszewski

Utente Attivo
5 Dic 2013
119
1
0
Salve,
Per esercizio sto facendo delle prove con HTML5 e CSS. Il mio problema come si vede dall'immagine e che gli aside left e right rimangono solo negli angoli senza avere il height al 100% tra lo header e il footer. Quello che voglio che appaia una colonna a sinistra a destra che rimane per tutta la altezza tra lo header e il footer. Di seguito il codice. Grazie dell'aiuto :-)

HTML:
<head>
	<meta charset="UTF-8">
	<title>Sample</title>
	<link rel="stylesheet" href="../Css/sample.css">
	</head>
	<body>
		<header>
			<h1>HEADER</h1>
		</header>
		<div class="container">
		<aside class="left">
			<h2>LEFT</h2>
		</aside>
		<aside class="right">
			<h3>RIGHT</h3>
		</aside>
		<section>
			<p></p>
		</section>
		</div>
		<footer>
			<h4>FOOTER</h4>
		</footer>
	</body>
Codice:
html {
	margin: 0;
	padding: 0;
}
body {
	font-family: Helvetica, Arial, sans-serif;
	padding: 0;
	margin: 0;
	/*background-color: #dac7c7;*/
}
header {
	position: relative;
	background-color: #E9E9E9;
	padding: 40px 0;
	text-align: center;
	top: 0;
	width:100%;
}
div.container {
	width: 100%;
	height: auto;
	background-color: red;
}
aside.left {
   	background-color: blue;
   	position: relative;
   	float: left;
   	height: 100%;
	}
aside.right {
	background-color: blue;
	position: relative;
   	float: right;
   	height: 100%;
			}
section {
  
}
footer {
	clear:both;
	background-color: #3f3f3f;
	color: #FFF;
	padding: 15px 0;
	text-align: center;
	position:absolute;
	bottom:0;
	width:100%;
	height:60px;
}
 
Ultima modifica di un moderatore:
se non mi sbaglio nel css per fare una cosa del genere devi aggiungere:
Codice:
html{
    height: 100%;
}
body{
    height: 100%;
}

vedi se funziona :)
 
Ciao, le prime due immagini sono troppo grandi, rendono difficoltosa la lettura, le elimino.
La parola aiuto non deve essere usata nei titoli delle discussioni, modifico.
Il codice CSS puoi racchiuderlo tra i tag [ CODE ] e [ /CODE ]
 
Ultima modifica:
Ah ok grazie per il chiarimento per la prossima volta staro più attento.
 
Ultima modifica di un moderatore:
mmm ho visto ma non ti so dire! non so come risolvere questo problema xD.. ho provato a vedere QUA però non è quello che pensavo xD
 
togli queste due regole dal footer e dovresti risolvere
Codice:
 position:absolute;
 bottom:0;
 

Discussioni simili