Estoy implementando un web site utilizando CSS, es decir todo lo estoy haciendo con DIV, pero se me presenta un problema.
La idea es que el web site se ajuste a la resolución de monitos independientemente de cual sea esta, Hasta ahí parece que todo va muy bien.
ERl problema se me presenta en que si el contenido del web site crece mucho, el DIV que contiene el contenido del web site no crece y por lo tanto pierdo esa información, en otras palabras el web site no me esta creciendo cuando el texto es muy largo.
Les adjunto el cofigo de la página HTML y el codigo del archivo CSS
Muchas gracias por toda la ayuda que me puedan prestar
Código HTML
Código:
Código CSS<!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 runat="server">
<title>Titulo de la página</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="Estilos/estilos.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="estCabezera">Cabecera</div>
<div id="estBarraNavHorizontal">Barra Navegación Horizontal</div>
<div id="estBarraNavVertical">Barra Navegación Vertical</div>
<div id="estContenido">Contenido</div>
<div id="estBarraDerecha">Barra Derecha</div>
<div id="estPiePagina">Pie de Página</div>
</div>
</form>
</body>
</html>
Código:
@charset "utf-8";
/* CSS Document */
body,td,th {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #333333;
}
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
a:link {
color: #333333;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #333333;
}
a:hover {
text-decoration: underline;
color: #333333;
}
a:active {
text-decoration: none;
color: #333333;
}
/********************* Inicio Estilos Maquetación *********************/
#estCabezera{
background-color: #0000FF;
width:100%;
height:150px;
}
#estBarraNavHorizontal{
background:#0000CC;
width:100%;
height: 30px;
}
#estBarraNavVertical{
position: fixed;
width: 200px;
height:100%;
background-color:#FFDD00;
top: 180px;
right: auto;
bottom: auto;
left: 0;
}
#estContenido{
position: fixed;
width: auto;
background-color:#F33355;
top: 180px;
right: 200px;
bottom: auto;
left: 200px;
height:inherit;
}
#estBarraDerecha{
position: fixed;
width: 200px;
height:100%;
background-color:#939390;
top: 180px;
right: 0;
bottom: auto;
left: auto;
}
#estPiePagina{
position: fixed;
width: 100%;
height: 30px;
background-color:#FFFF00;
top: auto;
right: 0;
bottom: 0;
left: 0;
}
/********************* Fin Estilos Maquetación *********************/
vale
