Problema altezza div

**lordkarolus** · 21-03-2008, 17:06

il problema è arcinoto ma non riesco a trovare alcuna soluzione...questo è il mio html

codice:

    <body>
        <div id="container">
            <div id="logo">                
            </div>
            <div id="menubar">                
            </div>
                <div id="menuright">
                    <?php include_once("menu.php"); ?>
                </div>            
                <div id="main">
                    <?php include_once("main.php"); ?>
                </div>
            <div id="footer">
                contenuto footer
            </div>
        </div>
    </body>

e questo il css

codice:

body
{
    margin: 0;
    padding: 0;
    font-family: Verdana, Arial, Helvetica, Georgia, Sans-Serif;
    font-size: 10px;
    color: Black;    
}
#container
{
    margin: 0 auto;
    width: 760px;
    border-left: 1px solid #000;
    border-right: 1px solid #000; 
    height: 100%;
}
#menubar
{
    background-color: #495676;
    font-family: Verdana, Arial, Helvetica, Georgia, Sans-Serif;
    font-size: 12px;
    color: White;
    height: 20px;
}
#logo
{
    background-image: url("img/logo.png");
    background-repeat: no-repeat;
    height: 150px;
}
#footer
{
    border-top: 1px solid #000;
    background-color: #a6c30a;
    font-family: Verdana, Arial, Helvetica, Georgia, Sans-Serif;
    font-size: 10px;
    clear: right;
    text-align: center;
}
#menuright
{
    float: right;
    width: 228px;
    background-color: #a6c30a;
    padding: 0;
    border-left: 1px solid #000;
    height: 100%;
}
#main
{
    margin-right: 228px;
    width: 532px;
    height: 100%;
}
input
{
    border: 1px solid #000;
    width: 100px;    
}
.button
{
    border: 1px solid #000;
    width: 50px;
}
p
{
    font-weight: bold;
    font-size: 14px;
    padding-left: 20px;
    text-align: left;
    vertical-align: top;
}
li
{
    font-size: 10px;
    padding-left: 10px;
    text-align: left;
    vertical-align: top;
    list-style: none;
}
img
{
	 border-width: 0px;
	 vertical-align: text-bottom;
}
fieldset
{
    border: 0;
    padding: 0;
}
a
{
    text-decoration: none;
    color: Black;
    cursor: pointer;
}
a:hover
{
    text-decoration: none;
    color: Black;
    cursor: pointer;
}
a:hover.post
{

	 color: Black;
    font-family: Verdana, Arial, Helvetica, Georgia, Sans-Serif;
    font-size: 12px;
    text-decoration: underline;
}
.post,a.post
{

	 color: Black;
    font-family: Verdana, Arial, Helvetica, Georgia, Sans-Serif;
    font-size: 12px;
}
.subpost
{

	 color: Black;
    font-family: Verdana, Arial, Helvetica, Georgia, Sans-Serif;
    font-size: 10px;
}
h2
{
    font-size: 16px;
}

Il problema è che il div menuright non si estende al 100% le ho provate tutte ma non riesco a farlo estendere...soluzioni?

**gengix** · 21-03-2008, 17:42

Prova così:

css:
body
{
margin: 0;
padding: 0;
font-family: Verdana, Arial, Helvetica, Georgia, Sans-Serif;
font-size: 10px;
color: Black;
text-align:center;
}
#container
{
margin: 0 auto;
width: 760px;
border-left: 1px solid #000;
border-right: 1px solid #000;
text-align:left;
}
#menubar
{
background-color: #495676;
font-family: Verdana, Arial, Helvetica, Georgia, Sans-Serif;
font-size: 12px;
color: White;
height: 20px;
}
#logo
{
background-image: url("img/logo.png");
background-repeat: no-repeat;
height: 150px;
}
#footer
{
border-top: 1px solid #000;
background-color: #a6c30a;
font-family: Verdana, Arial, Helvetica, Georgia, Sans-Serif;
font-size: 10px;
clear: both;
text-align: center;
}
#menuright
{
float: right;
width: 228px;
background-color: #a6c30a;
padding: 0;
border-left: 1px solid #000;
height:auto;
border:solid 1px #000;
}
#main
{
float:left;
width: auto;
}
input
{
border: 1px solid #000;
width: 100px;
}
.button
{
border: 1px solid #000;
width: 50px;
}
p
{
font-weight: bold;
font-size: 14px;
padding-left: 20px;
text-align: left;
vertical-align: top;
}
li
{
font-size: 10px;
padding-left: 10px;
text-align: left;
vertical-align: top;
list-style: none;
}
img
{
border-width: 0px;
vertical-align: text-bottom;
}
fieldset
{
border: 0;
padding: 0;
}
a
{
text-decoration: none;
color: Black;
cursor: pointer;
}
a:hover
{
text-decoration: none;
color: Black;
cursor: pointer;
}
a:hover.post
{

color: Black;
font-family: Verdana, Arial, Helvetica, Georgia, Sans-Serif;
font-size: 12px;
text-decoration: underline;
}
.post,a.post
{

color: Black;
font-family: Verdana, Arial, Helvetica, Georgia, Sans-Serif;
font-size: 12px;
}
.subpost
{

color: Black;
font-family: Verdana, Arial, Helvetica, Georgia, Sans-Serif;
font-size: 10px;
}
h2
{
font-size: 16px;
}

In questo modo tutto si adatterà al contenuto che scrivi, ho provato anche su IE5

**lordkarolus** · 21-03-2008, 18:26

a me in quel modo non funziona...non cambia nulla rispetto a prima...uso firefox 2.0.12 su linux...

**gengix** · 21-03-2008, 18:55

Nn uso linux, cmq io avrei fatto così sia struttura che css:

xhtml:
<div id="container">
<div id="logo">
</div>
<div id="menuBar">
</div>
<div id="bodyPage">
<div id="menuRight">
testo
</div>
<div id="main">
testo
</div>
</div>
<div id="footer">
testo
</div>
</div>

css:
*
{
margin:0;
padding:0;
}
body
{
text-align:center;
font: 10px Verdana, Arial, Helvetica, Georgia, Sans-Serif;
color:#000;
}
#container
{
margin:auto;
width: 760px;
text-align:left;
border-left: 1px solid #000;
border-right: 1px solid #000;
text-align:left;
}
#logo
{
width:auto;
height:150px;
}
#menuBar
{
width:auto;
background-color: #495676;
height:20px;
}
#bodyPage
{
width:auto;
border:solid 1px #000;
}
#bodyPage:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
* html #bodyPage
{
height:1%;
}
#menuRight
{
float: right;
width: 228px;
background-color: #a6c30a;
border:solid 1px #000;
}
#main
{
width:auto;
border:solid 1px #000;
}
#footer
{
border-top: 1px solid #000;
background-color: #a6c30a;
clear: both;
text-align: center;
}

Nn ti ho messo tutti gli stili tipo quelli dei link per ovvie ragioni. Nella mia macchina va con tutti i browser, sono quasi convinto che andrà anche sulla tua, fammi sapere.

**fcaldera** · 21-03-2008, 22:51

in un layout a due colonne di norma si usa la tecnica delle false colonne (faux columns) ampiamente discussa nel forum (e anche in rete), per cui se fai una ricerca dovresti trovare la soluzione.

Non si può infatti dare genericamente height: 100% ad un elemento perchè, i valori percentuali sono relativi alla stessa proprietà dell'elemento genitore.

se scrivo

<div style="height: 100%">test</div>

l'unica cosa plausibile è che il div sarà alto quanto basta per contenere il testo, poichè non ho nessun elemento genitore che definisce un valore di riferimento (il 100% di che cosa?). Però se scrivo

<div style="height: 500px">
<div style="height: 100%">test</div>
</div>

il div più interno sarà alto il 100% di 500 pixel, ovvero... esattamente 500 pixel.

Discussione: Problema altezza div

Strumenti discussione

Ricerca discussione

Visualizza

Problema altezza div

Permessi di invio