Diseño CSS con tamaño completo barra de navegación izquierda y el encabezado

me gustaría tener la siguiente distribuciónDiseño CSS con tamaño completo barra de navegación izquierda y el encabezado

+++++++++++++++++++++++ 
+Header    + 
+++++++++++++++++++++++ 
+Nav+     + 
+ +     + 
+ +     + 
+ +  Content + 
+ +     + 
+++++++++++++++++++++++

así que básicamente un diseño de dos columnas con una cabecera. He revisado muchos generadores de maquetación CSS en la red, pero me produjeron un resultado en el que la barra de navegación izquierda es tan grande como el contenido. Puedo escalarlo con "altura: 500px" o lo que sea, pero quiero que sea de tamaño completo (de arriba a abajo de la ventana del navegador) todo el tiempo. Cambiar el valor con "altura: 100%" no funciona. Si quiere probarlo usted mismo: http://guidefordesign.com/css_generator.php y luego seleccione la página completa, diseño de dos columnas, con encabezado para ver lo que quiero decir. Si lo desea, me puede decir que la propiedad que tengo que ajustar en el archivo CSS generado para hacer que funcione

Fuente

2010-08-11 Dave

Es posible que desee echar un vistazo a y obtener la idea de:

Super Simple Two Column Layout

See the demo here.

Fuente

2010-08-11 07:37:09 Sarfraz

Un poco de respuesta general: Mira en los marcos de CSS, como http://www.blueprintcss.org/ - estos permiten definir cuadrículas.

Aquí es una página de ejemplo: http://www.blueprintcss.org/tests/parts/sample.html

Con respecto al problema altura, probar este (que debe dar el 100% de la altura de la ventana del explorador para el div todo el tiempo):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<head> 
    <title>Test Page</title> 
    <style type="text/css"> 
    body { 
     padding: 0px; 
    } 
    .Container { 
     height: 100%; 
     width: 100%; 
     margin: 0px; 
     padding: 0px; 
     background-color: #123456; 
     color: black; 
    } 
    </style> 
</head> 
<body> 
    <div class="Container"> 
    </div> 
</body> 
</html>

Fuente

2010-08-11 07:39:36 miku

Un solución que puede probar, es darle al área de contenido una imagen de fondo que se repite verticalmente (1px de alto y ancho de su página). El lado izquierdo de esa imagen tendría el color de fondo de navegación, y el resto sería del color del contenido del color de fondo ...

Fuente

2010-08-11 07:53:28 Naruto

Puede intentarlo. Funciona en los navegadores que probé (Firefox, IE7 + 8, Opera, Safari, Chrome). Solo juegue con las unidades de porcentaje para encabezado y columnas.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>for stackoverflow</title> 
    <style> 
    body, html { 
     padding : 0px; 
     margin : 0px; 
     height : 100%; 
    } 

    #wrapper { 
     width:900px; 
     height:100%; 
     margin: 0px; 
     padding: 0px; 
    } 

    #header { 
     height:10%; 
     background-color:#930; 
     width:900px; 
    } 

    #nav { 
     background-color:#999; 
     width:200px; 
     height:90%; 
     float:left; 
    } 

    #content { 
     height:90%; 
     background-color:#363; 
     width:700px; 
     float:left; 
    } 
    </style> 
</head> 

<body> 
<div id="wrapper"> 
    <div id="header"></div> 
    <div id="nav"></div> 
    <div id="content"></div> 
</div> 
</body>

Fuente

2010-08-11 09:23:21 Sotiris

Buena respuesta, pero no tiene el control de la propiedad 'height'. Simplemente establecer el 'ancho' y' flotar: izquierda' hace el truco. – beautifulcoder

Diseño CSS con tamaño completo barra de navegación izquierda y el encabezado

Respuesta

Cuestiones relacionadas