problemi height

**Chimira** · 17-01-2006, 12:25

Voglio costruire un layout composto da un header, un footer e due colonne centrali.

Il codice è il seguente:

<html>
<head>
<style type="text/css">
html,body{
margin:0px;
}

.header {
width: 100%;
height: 40px;
background: #ffcc00;
font-size:20px;
}

.footer {
width: 100%;
height: 40px;
margin-left:0px;
background: #ffcc00;
font-size:20px;
}

.menu {
width: 30%;
height: 100%;
overflow: auto;
float:left;
background: #aaaaaa;
font-size:20px;
}
.list {
width: 70%;
height: 100%;
overflow: auto;
float:right;
background: #cccccc;
font-size:20px;
}
</style>
</head>
<body>
<div class="header">HEADER</div>
<div class="menu">MENU</div>
<div class="list">LIST</div>
<div class="footer">FOOTER</div>
</body>
</html>

Il problema che non riesco a risolvere è se lo visualizzo devo scrollare per far vedere il footer. Io vorrei che l'altezza dei div MENU e LIST fosse calcolata prendendo l'altezza dello screen e togliendo le altezze fisse di HEADER e FOOTER.

E' possibile farlo con i CSS?

Grazie

**av250866** · 17-01-2006, 13:23

non ci giurerei ma credo che senza javascript non lo puoi fare.
Per farlo bisognerebbe che il server potesse sapere la risoluzione già durante la prima negoziazione, e non credo sia possibile.

**Chimira** · 17-01-2006, 13:25

Infatti con javascript ho risolto, ma speravo potessi usare solamente i css.

Grazie comunque.

Se a qualcuno interessa ho modificato il codice in:

<html>
<head>
<script>
function Inizializza() {
document.getElementById('contenitore').style.heigh t=document.body.clientHeight-80;
}
function Tempo() {
setInterval("Inizializza()", 1);
}
</script>
<style type="text/css">
html,body{
margin:0px;
}

.header {
width: 100%;
height: 40px;
background: #ffcc00;
font-size:20px;
}

.footer {
width: 100%;
height: 40px;
margin-left:0px;
background: #ffcc00;
font-size:20px;
}

.menu {
width: 30%;
height: 100%;
float:left;
background: #aaaaaa;
font-size:20px;
}

.list {
width: 70%;
height: 100%;
float:right;
background: #cccccc;
font-size:20px;
}
</style>
</head>
<body onload="Tempo();">
<div id="contenitore">
<div class="header">HEADER</div>
<div class="menu">MENU</div>
<div class="list">LIST</div>
<div class="footer">FOOTER</div>
</div>
</body>
</html>

Il SETinterval l'ho inserito nel caso uno madifichi la grandezza della finestra.

Discussione: problemi height

Strumenti discussione

Ricerca discussione

Visualizza

problemi height

Permessi di invio