Ago 05 2010

Gestire attributo di stile height con doctype xhtml 1.0 transitional

Published by Lorenzo at 10:03 pm under Programmazione Web

Me lo appunto qui, così magari non lo dimentico, approfittandone anche per tirar via le ragnatele da questo spazio.

In una pagina HTML, se specifico un doctype di tipo xhtml 1.0 transitional, devo prendere alcuni accorgimenti se intendo utilizzare l’attributo di stile “height”, riferito ad uno o più elementi div ed espresso in percentuale; ad esempio, se ho un codice di questo tipo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
  <style type="text/css">
    #div1
    {
    width: 100%;
    height: 15%;
    border: 2px solid blue;
    }
    #div2
    {
    width: 100%;
    height: 60%;
    border: 2px solid red;
    }
    #div3
    {
    width: 100%;
    height: 25%;
    border: 2px solid green;
    }
  </style>
  <title>TEST</title>
</head>
 
<body>
  <div id="div1">
    <h1>Contenitore 1</h1>
  </div>
  <div id="div2">
    <h1>Contenitore 2</h1>
  </div>
  <div id="div3">
    <h1>Contenitore 3</h1>
  </div>
 
</body>
</html>

posso notare come in realtà, lo spazio occupato dai tre elementi div sia quello strettamente necessario a contenere le tre intestazioni delimitate dai tag h1, come mostrato in figura 1:

Pagina html con attributo height impostato ma non funzionante

Pagina html con attributo height impostato ma non funzionante

dove è possibile vedere che le percentuali che ho indicato relative all’altezza da assegnare ai tre elementi div sono state bellamente ignorate dal browser.

Per risolvere il problema, devo indicare l’altezza complessiva degli elementi html e body, e impostarla al 100%, per cui il codice precedente assume quest’aspetto:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
  <style type="text/css">
    html,body
    {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    }
    #div1
    {
    width: 100%;
    height: 15%;
    border: 2px solid blue;
    }
    #div2
    {
    width: 100%;
    height: 60%;
    border: 2px solid red;
    }
    #div3
    {
    width: 100%;
    height: 25%;
    border: 2px solid green;
    }
  </style>
  <title>TEST</title>
</head>
 
<body>
  <div id="div1">
    <h1>Contenitore 1</h1>
  </div>
  <div id="div2">
    <h1>Contenitore 2</h1>
  </div>
  <div id="div3">
    <h1>Contenitore 3</h1>
  </div>
 
</body>
</html>

Il risultato dell’applicazione di questo codice è visibile in figura 2:

Pagina html con l'impostazione corretta dell'attributo height riferito ai tag html e body

Pagina html con l'impostazione corretta dell'attributo height riferito ai tag html e body

A parte il fatto che in questo modo il box in fondo alla pagina deborda un po’ (a causa dell’applicazione dei bordi, la cui dimensione si va a sommare al 100% complessivo dell’altezza degli elementi div), è possibile vedere che abbiamo raggiunto lo scopo di poter gestire a piacimento l’altezza dei vari elementi div, esprimendo questi valori dell’attributo di stile height in percentuale rispetto all’altezza del 100% della pagina.

Questo problema invece non si presentava utilizzando un doctype HTML 4.0 TRANSITIONAL, che era decisamente meno rigoroso su questi aspetti.

Trackback URI | Comments RSS

Leave a Reply