#1 Consulta Css y xhtml, div height = 100%
Hola foreros, vengo con una duda q si bien hay info en san google, no lo pude solucionar, estoy haciendo un site y quiero que para las distintas resoluciones de los usuarios el div contenido tenga un height de 100%, aunque falte contenido. Tambien me gustaria saber sus opiniones sobre lo que pienso hacer (lo del contenido, ya q me gustaria q para todas las resoluciones el footer este abajo de todo) y sobre el sitio en general .El sitio en cuestion es este. tambien dejo el codigo:
Xhtml:
Y el CSS:
Xhtml:
Código:
<!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>Haras La Misericordia - Inicio</title>
<link href="estilos.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="headwrapper">
<div id="header"></div>
</div>
<div id="contenido">
<div id="imagen"><img src="elementos_activos/imagenes/harasimagen.jpg" alt="Haras Los campeones" /> </div>
<div id="colizq">
<h1><font face="Arial, Helvetica, sans-serif">Bienvenido</font></h1>
<p>texto.</p><br>
<p>› texto.
<p>› texto.
<p>› texto</div>
<div id="colder">
<h2>Servicos</h2>
<p>texto</p>
<img src="elementos_activos/imagenes/harasthumbs.jpg" alt="Caballos" width="330" height="79" align="absbottom" class="thumbs" /></div>
<div class="clearfooter"></div>
<div id="footer">copyright© 2009 haraslamisericordia.com.ar All rights reserved. Xhtml - Css
<div id="diseno">Diseño web: Concept Dezain</div>
</div>
</div>
</body>
</html>
Código:
@charset "utf-8";
/* CSS Document */
* {
margin: 0; padding: 0;
}
html {
width: 100%;
}body {
width: 100%;
background-image: url(elementos_activos/imagenes/bodyfondo.jpg);
background-repeat: repeat;
}
#headwrapper {
height: 251px;
width: 100%;
background-image: url(elementos_activos/imagenes/harasheadfondo.jpg);
background-repeat: repeat-x;
background-position: center center;
}
#header {
height: 251px;
width: 700px;
margin-right: auto;
margin-left: auto;
background-image: url(elementos_activos/imagenes/harashead.jpg);
background-repeat: no-repeat;
background-position: center center;
}
#contenido {
width: 700px;
height: 100%;
min-height: 100%;
margin-right: auto;
margin-left: auto;
background-color: #F3EDE5;
background-image: url(elementos_activos/imagenes/harasfondofooter.jpg);
background-repeat: no-repeat;
background-position: center bottom;
position:relative;
margin-bottom: -30px;
}
#contenido #imagen {
height: 191px;
width: 700px;
}
#colizq {
height: 225px;
width: 330px;
margin-left: 10px;
float: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #787571;
background-image: url(elementos_activos/imagenes/harashdivisor.jpg);
background-repeat: no-repeat;
background-position: center 20px;
}
#colder {
float: right;
height: 225px;
width: 330px;
margin-right: 10px;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #787571;
background-image: url(elementos_activos/imagenes/harashdivisor.jpg);
background-repeat: no-repeat;
background-position: center 20px;
}
#footer {
height: 60px;
width: 680px;
border-top-width: 1px;
border-top-style: dotted;
border-top-color: #666666;
margin-right: auto;
margin-left: auto;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #666666;
position: relative;
}
#diseno {
width: 140px;
position: absolute;
left: 540px;
top: 2px;
}
.thumbs {
margin-top: 10px;
}
h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
font-style: normal;
color: #666666;
text-decoration: none;
text-align: right;
margin-bottom: 10px;
}
h2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
color: #666666;
text-decoration: none;
text-align: left;
margin-bottom: 10px;
}
.clearfooter {
height: 10px;
clear: both;
}
0
