Pagina che si allunga automaticamente

**Excalibur81** · 22-08-2009, 01:09

Ciao ragazzi,

avrei una domanda. Sto costruendo una pagina web con i seguenti div

- DIV pagina (comprende tutta la visuale dello schermo width: 100% e height: 100%)
- DIV menu
- DIV body
- DIV fotter

Ho in pratica le parti principali di una pagina web ed uso le percentuali invece di usare i px;

Ho notato però che inserendo troppe informazioni (come immagini paragrafi tabelle, ecc) nel div body, le informazioni in eccesso finisco fuori dal div body e finiscono nel footer.

Come faccio ad allungare o più precisamente adattare la lunghezza del div body e conseguentemente del div menu al variare della mole di informazioni contenute in uno di questi due DIV???

In pratica volgio una pagina che si allunga automaticamente al variare delle informazioni immesse nel div body o div menu.

**marco.carrieri** · 22-08-2009, 20:11

Hai provato a mettere nel div che contiente tali foto lo style "overflow:auto" ?

**Excalibur81** · 22-08-2009, 20:19

Sinceramente no, non ho usato l'overflow.

Guardo su internet il suo funzionamento dato che non l ho mai usato in passato.

**Excalibur81** · 22-08-2009, 20:24

Ok, ho guardato adesso ma con la proprieta overflow: auto ottengo l'aggiunta delle scroll bar orrizzontali e verticali.

Non esiste un attributo css che mi allunghi la pagina automaticamente senza aggiungere le scroll bar?

**marco.carrieri** · 22-08-2009, 20:38

Per caso è settata un altezza per questo div contenitore?

**Excalibur81** · 22-08-2009, 20:47

Ti inserisco il mio css con l'aggiunta dell'attributo overflows

div#pagina
{
position: absolute;
width: 100%;
height: 100%;
border: 2px solid black;
border-color: red;

}

div#intestazione
{
position: absolute;
width: 100%;
height: 20%;
border: 2px solid black;
border-color: blue;
overflow: auto;

}

div#menu
{
position: absolute;
top: 20%;
left: 0%;
width: 20%;
height: 80%;
border: 2px solid black;
border-color: purple;
overflow: auto;

}

div#footer
{
position: absolute;
top: auto;
left: 0%;
width: 100%;
height: 20%;
border: 2px solid black;
border-color: green;
overflow: auto;

}

div#body
{

position: absolute;
top: 20%;
left: 20%;
height: 80%;
width: 80%;
overflow: auto;
border: 2px solid yellow;

}

Le informazioni vengono messe nel body, e dovrei riuscire ad allungare il div menu e il div body automaticamente senza mettere l overflow (bel problema).

**marco.carrieri** · 22-08-2009, 20:52

Puoi mettere anche l'html? Cosi vediamo eventuali errori di uso di classi o altro?

**Excalibur81** · 22-08-2009, 20:58

Inserisco l'html:

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Index</title>
<meta name="author" content="Ifraz Goeksungur">
<link href="Css_uno.css" rel="stylesheet" type="text/css" />
</head>

<div id="pagina">

<body>

<div id="intestazione">

</div>

<div id="body">

</div>

<div id="menu">

</div>
</body>

</div>

</html>

Per ora ho solo inserito delle frasi di prova all'interno dei diversi div ottenendo le scroll bar.

Tuttavia ho notato che eliminando il div body dal css (tenendo il div body nell html) la pagina si allunga correttamente come desiderato!!! Ma appena indico gli attributi del div body nel css allora torna tutto come prima con le scroll bar.

**Excalibur81** · 22-08-2009, 21:11

Togliendo il div body dal css e tenendo il div boy dall html ottengo l'effetto desiderato: la pagina si allunga automaticamente ma non riesco a posizionare il div body dato che non l ho indicato nel css e le informazioni immesse nel div body html vanno a finire negli altri div.

**simotenax** · 23-08-2009, 17:43

basta che togli al div body height:80% perchè dorebbe prendere come riferimento la dimensione dello schermo al caricamento, risultato: hai il div body che è fisso alla dimensione dell 80% dello schermo.. o gli dai un min-height o togli la definizione per l'altezza del tutto..

ricorda che min-height su ie6 non funziona quindi se lo usi da una definizione del genere:

min-height:80%;
height:auto !important;
height:80%;

spero che questo risolva il tuo problema, ciao!

Discussione: Pagina che si allunga automaticamente

Strumenti discussione

Ricerca discussione

Visualizza

Pagina che si allunga automaticamente

Permessi di invio