Salve e benvenuto.
Normalmente si utilizzano degli elementi contenitori (lo standard sono i div). Se non viene impostata alcuna altezza fissa (o altre regole che la influenzano), il div si estenderà in base al suo contenuto. Il discorso è chiaramente in linea di massima perché il tutto andrebbe poi impostato secondo le specifiche del design che si vuole ottenere, e alle varie considerazioni del caso.
Posso postare giusto un semplice esempio:
codice:
<!DOCTYPE HTML>
<html>
<head>
<title>Esempio</title>
<meta charset="utf-8">
<style type="text/css">
body {
background: #333;
}
h1 {
padding: 20px;
color: OrangeRed;
}
#principale {
margin: 20px;
background: White;
}
#barramenu {
background: Grey;
color: White;
text-align: center;
padding: 5px;
}
#corpo {
padding: 20px 10px;
}
table {
max-width: 400px;
margin: 20px auto;
}
table, td {
border: 1px solid Grey;
}
</style>
</head>
<body>
<div id="principale">
<h1>Lorem ipsum</h1>
<div id="barramenu">consectetur adipisicing elit</div>
<div id="corpo">
<table>
<tr>
<td>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</td>
</tr>
<tr>
<td>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</td>
</tr>
<tr>
<td>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</td>
</tr>
<tr>
<td>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</td>
</tr>
<tr>
<td>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</td>
</tr>
</table>
</div><!-- FINE CORPO -->
</div><!-- FINE PRINCIPALE -->
</body>
</html>
Ho buttato dentro qualche elemento giusto per dare una minima forma di struttura di un sito.
Il body ha un suo sfondo (in questo caso marcato dal colore grigio scuro).
Il div principale ha un margine di 20px così da lasciar intravedere, tutto attorno, lo sfondo del body.
Il div corpo, inteso come corpo della pagina, si estende in base al suo contenuto (come da tua richiesta), lasciando comunque il margine grigio di 20px a fondo pagina.
Nell'esempio ho inserito una semplicissima tabella abbastanza lunga da far estendere il div oltre l'area visibile.
Chiaramente, in questo caso, sulla finestra del browser apparirà la barra di scorrimento verticale.
Rispondi quotando
