Vediamo come fare un CSS il cui contenitore riempie tutta la pagina a prescindere dal contenuto e il cui footer rimane bloccato in basso:
vista.php :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"
/>
<title>Home</title>
<link rel="stylesheet"
href="../CSS/style.css" type="text/css"
media="screen"
/>
</head>
<body>
<div id="container">
<div id="header">
<h1>Il logo qui</h1>
</div>
<div id="sidebar">
<h2>barra laterale</h2>
<p>sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar
sidebar sidebar
sidebar sidebar sidebar sidebar sidebar sidebar
sidebar sidebar
sidebar sidebar sidebar</p>
</div>
<div id="main">
<div id="coluno">
<h2>colonna uno</h2>
<p>colonna uno colonna
uno colonna uno colonna uno colonna uno
colonna uno
colonna uno colonna uno colonna uno colonna uno
colonna
uno colonna
uno colonna uno colonna uno colonna uno colonna
uno</p>
</div>
<div id="coldue">
<h2>colonna due</h2>
<p>colonna due colonna
due colonna due colonna due colonna due
colonna due
colonna due colonna due colonna due colonna due
colonna
due colonna
due colonna due colonna due colonna due colonna
due
colonna due</p>
</div>
<div id="coltre">
<h2>colonna tre</h2>
<p>colonna tre colonna tre colonna tre colonna
tre colonna tre
colonna tre
colonna tre colonna tre colonna tre colonna tre
colonna
tre</p>
</div>
</div>
<div id="footer">
<p>Qui il footer</p>
</div>
</div>
</body>
</html>
style.css:
@CHARSET "ISO-8859-1";
html {
height: 100%;
padding: 10px;
}
body {
font: 100.01% “Trebuchet MS”,
Verdana, Arial,
sans-serif;
background: #00BFFF;
color: #555;
text-align: center;
height: 95%;
}
div#container
{
width: 950px;
margin: 0 auto;
position: relative; min-height : 100%;
background: white;
text-align: left;
padding-top: 1px;
padding-bottom:
5px;
padding-right: 5px;
padding-left: 5px;
border-radius: 20px;
-moz-border-radius:
20px;
-webkit-border-radius:
20px;
min-height: 100%;
}
div#header
{
background: #DBF8B4;
}
div#sidebar
{
float: left;
width: 200px;
padding-right: 5px;
padding-left: 50px;
}
div#main
{
float: left;
width: 610px;
}
div#coluno
{
float: right;
width: 200px;
position: relative;
left: -400px;
}
div#coldue
{
float: right;
width: 200px;
position: relative;
left: 0px;
}
div#coltre
{
float: right;
width: 200px;
position: relative;
left: 400px;
}
div#footer
{
clear: both;
width: 100%;
background: #D0B4F8;
position: absolute;
bottom: 5%;
}
Nessun commento:
Posta un commento