altezza di un iframe dentro un div

**psykopear** · 26-06-2008, 23:35

salve, ancora io. Praticamente ho un iframe nel quale visualizzo le varie pagine, che si trova all'interno di un div. Però ha un'altezza nettamente inferiore a quella della pagina, come potrei fare per renderlo tanto più alto quanti sono i contenuti al suo interno?

PS: L'iframe è questo

codice:

 <div id="content">
	<iframe src="homepage.html" id="iframe1" frameborder="0" name="iframe1"></iframe>
    </div>

Ho gia provato ad impostare height a 100%, o anche in pixel, da css, ma l'iframe rimane di queste dimensioni (allego screenshot)

**gengix** · 27-06-2008, 08:43

Ciao,
prova andare in homepage.html e scrivere una regola nel foglio di stile come questa:

codice:

html, body {
height:100%;
}

Prova vedere cosa succede.

**psykopear** · 27-06-2008, 14:14

Originariamente inviato da gengix
Ciao,
prova andare in homepage.html e scrivere una regola nel foglio di stile come questa:

codice:

html, body {
height:100%;
}

Prova vedere cosa succede.

no, non va neanche così. Per completezza posto i vari codici:

index.html

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>



<title>Psykopear's websapce</title><meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
@import url("syle.css");
a#viewcss{color: #00f;font-weight: bold}
</style>


</head><body>
<div id="container">
    <div id="header">
            [img]header.png[/img]

    </div>
    <div id="navigation">
	<ul>[*]Home[*]Sirm2[*]Radio On Shell[*]Download[*]Musica[/list]
    </div>
    <div id="content">
	<iframe src="homepage.html" id="iframe1" frameborder="0" name="iframe1"></iframe>
    </div>
    <div id="footer">Grafica e layout sono liberamente utilizzabili. Per info
        <a href="http://jigsaw.w3.org/css-validator/">
            
        </a>
    </div>
</div>
</body></html>

Ed ecco invece il css

codice:

html,body{margin: 0;padding: 0;height: 100%}
body{font-family: arial,sans-serif;font-size: 76%}
div#container{position: relative; width:727px; margin: 0 auto;text-align: left;border-left: 2px solid #2988b9;border-right: 2px solid #2988b9; border-top: 2px solid #2988b9;}

body>div#container{height: auto; min-height: 100%}

/*stili generici, su header e footer*/
div#header{margin: 0 auto; /*padding: 0 auto;*/ color: #ff0; text-align: center}
h1,h2{margin: 0;padding:0}
h1{padding-left:0.5em;font: bold 2.3em/80px arial,serif}
h2{color: #999;font-size: 1.5em}
div#footer{position:absolute; bottom: 0; width: 716px}
div#footer{text-align:center;padding: 0.5em;
    background-color: #2988b9; color: #000}
div#footer a{color: #fff;font-weight: bold;text-decoration: underline}

/*stili specifici per il layout*/
div#navigation{background-color:#000000; text-align: center}
div#content{padding: 0 1.5em 5em}
iframe{width: 100%}


/*stili per la navigazione*/

div#navigation ul{display: inline; margin: 0; padding: 0; list-style-type: none;}
/*div#navigation ul:hover{background: #2988b9}*/
div#navigation li{display: inline; margin: 0 0 0 1em; padding: 0} 
div#navigation a{color:#ffffff; font: normal bold 1.2em/2.5em arial,sans-serif; text-decoration: none}
div#navigation a:hover, div#navigation a:focus, div#navigation a:active{color: #fff; background: #2988b9}
div#navigation a#activelink{background: #2988b9;text-decoration: none}

**psykopear** · 27-06-2008, 16:06

Originariamente inviato da psykopear
salve, ancora io. Praticamente ho un iframe nel quale visualizzo le varie pagine, che si trova all'interno di un div. Però ha un'altezza nettamente inferiore a quella della pagina, come potrei fare per renderlo tanto più alto quanti sono i contenuti al suo interno?

PS: L'iframe è questo

codice:

 <div id="content">
	<iframe src="homepage.html" id="iframe1" frameborder="0" name="iframe1"></iframe>
    </div>

Ho gia provato ad impostare height a 100%, o anche in pixel, da css, ma l'iframe rimane di queste dimensioni (allego screenshot)

anzi, se imposto l'altezza in pixel, funziona, però così l'iframe non si ingrandisce man mano che c'è più contenuto, bensì rimane di quell'altezza fissa, e se il testo la supera compare la scrollbar. Io vorrei invece che ci siaun altezza minima dell'iframe, e, se il testo è più grande, invece di comparire la scrollbar, si ingrandisca tutto l'iframe (e di conseguenza si abbassi il footer ingrandendo tutto la parte centrale verso il basso). Ho gia provato ad impostare un min-height in pixel, ma niente. Come potrei fare?

**psykopear** · 27-06-2008, 16:30

Ho risolto semplicemente impostando un altezza in pixel all'iframe che fosse grande poco meno dell'altezza totale del div che la contiene. Per il momento mi accontento, appena lo metto online vi do il link

**psykopear** · 27-06-2008, 16:39

Originariamente inviato da psykopear
Per il momento mi accontento, appena lo metto online vi do il link

anzi no, perchè provando a mettere a schermo intero, il problema è più o meno come era prima, ovvera l'iframe si ferma ad una data altezza e sotto c'è il vuoto, che è brutto. Quindi il problema ritorna, come impostare un altezza variabile all'iframe?

**gengix** · 27-06-2008, 16:47

Per prima cosa dovresti dichiarare un doctype più rigido.
Seconda cosa dovresti evitare du usare gli iframe, visto che sono elementi deprecati e difficili (come avrai notato) da gestire.
Terza cosa dovresti postare il codice css della pagina "homepage.htm", non quello della pagina dove richiami l'iframe.
Lì devi impostare le proprietà che ti ho consigliato all'inizio.

**psykopear** · 27-06-2008, 16:53

Originariamente inviato da gengix
Per prima cosa dovresti dichiarare un doctype più rigido.
Seconda cosa dovresti evitare du usare gli iframe, visto che sono elementi deprecati e difficili (come avrai notato) da gestire.
Terza cosa dovresti postare il codice css della pagina "homepage.htm", non quello della pagina dove richiami l'iframe.
Lì devi impostare le proprietà che ti ho consigliato all'inizio.

allora vediamo per punti:
Che doctype dovrei mettere secondo te?
2) Gli iframe mi sono stati consigliati sul forum di javascript, se c'è una soluzione più comoda per aprire pagine esterne in un div e (magari) anche con i css, ben venga
3) mmm, il css è lo stesso dell'altra pagina, più quest'altra cosa che mi hai consigliato tu

codice:

<style type="text/css">
@import url("syle.css");
a#viewcss{color: #00f;font-weight: bold}
html, body {
height:100%;
}

</style>

Sbaglio ad usare un unico css? E' che è molto poco che li uso, quindi è facile che faccia questi errori.

Grazie per la disponibiltà

**psykopear** · 27-06-2008, 17:10

intanto se può essere utile ho dato una sistemata all'indentazione del css, che era illeggibile

codice:

html, body {
margin : 0;
padding : 0;
height : 100%;
}
body {
font-family : arial, sans-serif;
font-size : 76%;
}

div#container {
position : relative;
width : 727px;
margin : 0 auto;
text-align : left;
border-left : 2px solid #2988b9;
border-right : 2px solid #2988b9;
border-top : 2px solid #2988b9;
height : 100%;
}
body > div#container {
height : auto;
min-height : 100%;
}
/*stili header e footer*/
div#header {
margin : 0 auto;
color : #ff0;
text-align : center;
}
h1, h2 {
margin : 0;
padding : 0;
}
h1 {
padding-left : 0.5em;
font : bold 2.3em/80px arial, serif;
}
h2 {
color : #999;
font-size : 1.5em;
}
div#footer {
position : absolute;
bottom : 0;
width : 716px;
}
div#footer {
text-align : center;
padding : 0.5em;
background-color : #2988b9;
color : #000;
}
div#footer a {
color : #fff;
font-weight : bold;
text-decoration : underline;
}
/*stili per il layout*/
div#navigation {
background-color : #000000;
text-align : center;
display : block;
float : left;
width : 727px;
}
div#content {
padding : 0 1.5em 5em;
}
iframe#iframe1 {
width : 100%;
min-height : 350px;
padding : 1em 0 0 0;
}
/*Stili per la navigazione*/
div#navigation ul {
display : inline;
margin : 0;
padding : 0;
list-style-type : none;
}
div#navigation li {
display : inline;
margin : 0 0 0 1em;
padding : 0;
display : block;
}
div#navigation a {
margin : 0 1em 0 0;
color : #ffffff;
font : normal bold 1.2em/2.5em arial, sans-serif;
text-decoration : none;
float : left;
}
div#navigation a:hover, div#navigation a:focus, div#navigation a:active {
color : #fff;
background : #2988b9;
display : block;
float : left;
}

**gengix** · 27-06-2008, 17:21

Che doctype dovrei mettere secondo te?

O uno strict che è rigido.

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

O un transitional che ti perdona di più (nel tuo caso secondo me è più adeguato):

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

2) Gli iframe mi sono stati consigliati sul forum di javascript, se c'è una soluzione più comoda per aprire pagine esterne in un div e (magari) anche con i css, ben venga

Hai necessità per forza che il contenuto arrivi da una pagina esterna?? Non puoi fare tutto in una pagina?

3) mmm, il css è lo stesso dell'altra pagina, più quest'altra cosa che mi hai consigliato tu

Qui non ci capiamo, esiste una benedetta pagina html che si chiama homepage.html?? Se esiste immagino avrà del codice, nell'head di quella pagina, apri l'attrubuto style così :

codice:

<style type="text/css">
html, body {
height:100%;
}
</style>

e provi a scrivere la regola.

Discussione: altezza di un iframe dentro un div

Strumenti discussione

Ricerca discussione

Visualizza

altezza di un iframe dentro un div

Re: altezza di un iframe dentro un div

Permessi di invio