Problemas con un diseño fluid

Nekko · #1 (**permalink**) 14/02/2012, 07:27

Tengo una web con un header y footer que deben quedar visibles todo el tiempo, para lo cual utilizo position:fixed.

En el centro tenemos el contenido y debe añadir una barra de scroll para navegarlo cuando sea necesario.

Mi problema es que el contenido se adapta bien en la parte superior, pero en la parte inferior no, queda contenido oculto. Para que no pase, le di height: 75%, pero obviamente en resoluciones grandes queda muy mal (deja un espacio en blanco debajo).

Si le doy 100%, queda contenido debajo de la capa del footer.

Cómo puedo hacer para que ese div adapte su alto al espacio que queda libre entre header y footer?

Código CSS:

Ver originalhtml, body {
height: 100%;
overflow:hidden;
}
#top-header {
height: 60px;
width: 940px;
padding: 10px 10px 20px 10px;
background-image: url(../images/border-header.png);
background-repeat: repeat-x;
background-position: bottom center;
position: fixed;
top: 0;
}
#content-wrapper {
width: 960px;
position:relative;
top: 100px;
height: 75%;
overflow:auto;
display:block;
margin: 0 0 20px 0;
padding: 30px 0 20px 0;
}
#footer {
position: fixed;
bottom: 0;
width: 960px;
height:45px;
list-style-type:none;
background: white;
border-top: 7px solid #557db8;
}

kseso? · #2 (**permalink**) 14/02/2012, 09:16

Cita:

Iniciado por Nekko

Tengo una web con un header y footer que deben quedar visibles todo el tiempo, para lo cual utilizo position:fixed. Añádir z-index (principalmente por el header)

En el centro tenemos el contenido y debe añadir una barra de scroll para navegarlo cuando sea necesario. ¿El scroll debe ser en la caja del contenido o el de la ventana (html/body)?

Mi problema es que el contenido se adapta bien en la parte superior, pero en la parte inferior no, queda contenido oculto. Para que no pase, le di height: 75%, pero obviamente en resoluciones grandes queda muy mal (deja un espacio en blanco debajo). No necesita altura. Los div´s crecen en función de su contenido. Excepto si está fuera del flujo del html (limpiar float, clear...)

Si le doy 100%, queda contenido debajo de la capa del footer.

Cómo puedo hacer para que ese div adapte su alto al espacio que queda libre entre header y footer? Al sacar su encabezado y pie de página del discurrir natural del html (fixed) no son tenidos en cuenta al dibujar el resto de elementos (su contenedor). Así que debe hacer que éste último deje el espacio correspondiente a los fixed.
En la parte superior lo consigue con el top: 100px. Eso hará que esa caja se desplace sólo a efectos "visuales". Pero su presencia a efectos del flujo será la que le corresponde. (Otra cosa es que utilizase esas propiedades (top|left|right|bottom) para darle tamaño)
Yo optaría por añadir tal margen superior e inferior para que siempre (con más o menos contenido) deje un espacio libre equivalente al header y footer entre el inicio y final de su contenido y las cajas fixed.

Nekko · #3 (**permalink**) 14/02/2012, 10:12

Muchas gracias kseso! Me diste algunas cosas para probar, aunque ahora caigo en que la información que brindé resulta insuficiente, ya que hay otro contenedor alrededor de header y content-wrapper.

El scroll debería quedar sólo en la zona de contenido. Aquí subí provisoriamente lo que ando haciendo.
http://sitefun.com.ar/member-portal/editorpage.html

Críticas bienvenidas, sé que está plagado de errores.

kseso? · #4 (**permalink**) 14/02/2012, 15:36

Hay algunas cosillas...

Mira esta estructura, especialmente el css y compara las diferencias con la tuya. En especial con la barra del scroll (que se te "esconde").
Sólo visto en ff. Y suprimido el nav

Código HTML:

Ver original<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Kseso? jugando con css</title>
<style type="text/css">
* {margin:0; padding:0;}
html, body {
  background: #CD3335;
  height: 100%;
  margin: 0;
  overflow: hidden;
}
#page-wrapper {
  width: 968px;
  margin: 0 auto;
  background: #FF9966;
}
#header {
  background: #0060F0;
  position: relative;
  height: 50px;
}
#footer {  
  background: #0060F0;
  position: absolute;
  bottom: 0;
  height: 50px; 
  width: 968px;
}
#content-wrapper {
  background: #FF9966;
  bottom: 50px;
  overflow: auto;
  position: absolute;
  top: 50px;
  width: 968px;
}
 </style>
</head>
<body>
<div id="page-wrapper">
    <div id="header">
    </div>
    <div id="content-wrapper">
      <section>
<p>Tempus Vivamus sollicitudin Morbi scelerisque pede velit mus egestas eros dui. Sed condimentum metus Donec ante convallis ut consectetuer nunc senectus pretium. Ornare congue massa est consequat tortor congue dolor fermentum nibh wisi. Et Curabitur pellentesque convallis.</p>
      <p>Lorem ipsum dolor sit amet consectetuer Nunc Quisque wisi tincidunt molestie. Massa Nullam cursus Curabitur Vestibulum Nunc pede auctor cursus lacus ante. Aliquam magnis Duis tincidunt eget sollicitudin tincidunt laoreet ac dolor ac. Nam.</p>
<p>Et eros laoreet mi pretium sem mauris at malesuada id eleifend. Pretium sed neque congue quis eleifend amet Pellentesque dictumst semper tellus. Enim nibh et commodo laoreet natoque Donec In non Phasellus Quisque. At Curabitur faucibus elit pede dolor elit quis pretium tortor turpis. Elit orci pretium risus semper at.</p>
<p>Lorem congue ut Curabitur tortor pretium ipsum et Integer risus Donec. Auctor et sit cursus mauris ullamcorper amet et id consectetuer urna. Consequat nibh sapien velit leo nascetur massa est tristique tincidunt id. Pellentesque condimentum Duis velit Vivamus nibh natoque Curabitur congue nibh Vestibulum. Id nec vel Vivamus condimentum massa pharetra dis dolor justo consequat. Gravida velit Lorem et nibh Curabitur id hendrerit ac nonummy laoreet. Justo lobortis tincidunt nunc cursus lorem ac cursus lobortis Lorem vel. Pretium metus tempus mollis wisi.</p>
<p>Tortor consequat nibh Morbi nec senectus suscipit justo fringilla porttitor Nam. Vestibulum id sem massa condimentum Morbi volutpat mauris Curabitur laoreet porttitor. Consectetuer fringilla fermentum semper vitae eros ullamcorper amet rutrum lorem habitasse. Dui libero laoreet Quisque turpis semper laoreet mi sed adipiscing semper. Consequat ac sem nec et vel ullamcorper volutpat venenatis Phasellus Nunc. Lorem scelerisque Aliquam turpis Nunc sit consequat vel vitae augue accumsan. Et mauris vitae volutpat Phasellus.</p>
<p>Sed condimentum dapibus dui In et Integer enim penatibus et euismod. At laoreet sollicitudin orci et at sem volutpat ac tempor arcu. Magna nulla nulla consequat interdum eu Lorem in tempor cursus massa. Sed semper adipiscing sed gravida eget id urna interdum urna sit. Pretium semper habitant sed cursus quis consequat in Donec Aliquam augue. Nibh tincidunt dui In magna molestie tellus malesuada nibh pretium magnis. At metus turpis magna adipiscing sit ut sed egestas malesuada Nunc. Quis dolor fringilla eget molestie ac adipiscing vel ridiculus cursus mollis. Dui accumsan mauris justo convallis semper pede vel mauris at convallis. </p>
<p>Elit Nulla nulla et urna congue lorem et nulla enim dignissim. Interdum quis consectetuer in quis Pellentesque augue ac turpis justo tincidunt. Congue velit nulla et ac quis leo in pede vel pellentesque. Orci Aenean pellentesque nunc nibh Donec feugiat hendrerit id semper senectus. Sed malesuada montes risus at at montes ac semper velit leo. Eu ullamcorper fringilla accumsan Aenean aliquam Vestibulum Vivamus consequat adipiscing tellus. Tellus convallis Vestibulum quis Suspendisse suscipit Morbi ac Aenean nibh laoreet. Fermentum tellus cursus Vestibulum condimentum odio tellus Quisque Nulla quis pede. Vivamus metus ipsum orci risus Nam sed justo ac.</p>
<p>Nibh Nullam auctor dapibus faucibus purus Nullam Duis tincidunt elit vel. Pellentesque Sed mauris gravida elit elit dolor lacinia Curabitur Ut et. Dui laoreet malesuada Nam sagittis pede id Ut Pellentesque Donec Mauris. Elit elit et dui Nulla gravida consectetuer et congue Proin risus. Orci mus non Aenean nulla Nullam pretium tortor non libero convallis. Ipsum et tincidunt at interdum nec sem quis nibh justo dignissim. Curabitur fringilla dui tincidunt penatibus nibh tellus tristique neque ultrices Curabitur. Lacinia Sed ligula Vivamus amet ut vitae pharetra consequat eros Sed. Et dictum enim Lorem Donec Nulla.</p>
<p>Tempus Vivamus sollicitudin Morbi scelerisque pede velit mus egestas eros dui. Sed condimentum metus Donec ante convallis ut consectetuer nunc senectus pretium. Ornare congue massa est consequat tortor congue dolor fermentum nibh wisi. Et Curabitur pellentesque convallis.</p>
<p>FIN</p>
      </section>        
    </div>    
    <div id="footer">
    </div>
</div>
</body>
</html>

Nekko · #5 (**permalink**) 16/02/2012, 04:29

Gracias! Ahora me diste un poco mas clara sobre el asunto.

emprear · #6 (**permalink**) 16/02/2012, 16:39

Asumiendo ( de tu ejemplo) que el contenido del header y footer es estático y podés determinar que valores en porcentajes tenés que asignarles, el sobrante se lo das al contenido

Código HTML:

Ver original<!DOCTYPE html>
<html lang="es-ar">
<head>
<meta charset="utf-8" />
<title>Html5</title>
 
<style type="text/css">
/*<![CDATA[*/
 
html, body{
height: 100%;
padding: 0;
margin: 0;
}
 
div{
width: 960px;
margin: 0 -480px;
left: 50%;
position:absolute;
overflow: hidden;
}
 
#header{
top: 0;
height: 15%;
}
 
#footer{
bottom: 0;
height: 10%;
}
 
#contenido{
overflow-y: scroll;
height: 75%;
/* el top ara contenido = al height del header */
top: 15%;
}
 
/*]]>*/
</style>
</head>
<body>
<div id="header"> 
header
</div> 
<div id="contenido"> 
Lorem ipsum dolor sit amet, longa sustineat in deinde duas horrido in fuerat est
</div> 
<div id="footer"> 
footer
</div> 
</body>
</html>

Saludos

Nekko · #7 (**permalink**) 18/02/2012, 08:28

Hola emprear! El problema con asignar valores con porcentajes al header y footer es que no en todos los monitores se verá bien. Un 10% puede andar bien en mi resolución, pero en una resolución mucho mayor obviamente dejará espacios en blanco.

Utilicé el código de kseso? y quedó genial. No lo colgué en ningún lado porque el proyecto se volvió bastante pesado y me hicieron cambiar los nombres de las clases y ids, pero salvo por eso el código no varía del que usé de acá salvo por alguna medida.