3

Necesito ayuda, tengo problemas con un código CSS. tengo lo siguiente el documento tanto html y body los tengo seteados para que ocupen todo el alto y ancho de la pantalla. dentro de body tengo una caja contenedora, esa a su vez tiene dos cajas más cabecera y contenido, la cabecera no tiene un alto predefinido, pero quiero que la caja de contenido tome el restante del contenedor padre, pero le pongo un height alto y toma el alto de body y no el restante del contenedor, a continuación les anexo el código de ante mano gracias.

* {
  padding: 0;
  margin: 0;
}
html,
body {
  width: 100%;
  height: 100%;
  background: blue;
}
.contenido {
  width: 100%;
  height: 100%;
}
.cabecera {
  background: red;
  width: 100%;
}
.main {
  width: 100%;
  height: 100%;
  background: #000;
  color: #fff;
}
<div class="contenido">
  <div class="cabecera">
    <h1>Esto es la cabecera</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio explicabo quae sed nisi cupiditate mollitia praesentium, quisquam consequuntur expedita inventore eligendi placeat, ratione, ipsa reprehenderit voluptates deserunt, dicta facilis soluta.</p>
  </div>

  <div class="main">
    <p>contenido principal</p>
  </div>
</div>

3
  • Creo que tendrás que explicar más cosas o poner más código. Yo he copiado y pegado tu código y hace lo que toca. Podrías poner el código completo? Haces referencia a otros contenedores y otros objetos que no aparecen en el código sin el cual será complicado comprender el problema. el 2 jul. 2016 a las 16:43
  • 1
    No hay más código, solo restan las etiquetas body, head, html y Doctype. Saludos. Más abajo resolvieron mi duda, pero te agradezco tu tiempo. Saludos el 3 jul. 2016 a las 0:11
  • Entonces no he entendido la problematica :( el 3 jul. 2016 a las 1:07

1 respuesta 1

4

Para crear una app sin scroll vertical, el enfoque "clásico" es dar un alto fijo a la cabecera y posicionar el <div> de relleno de forma absoluta y estableciendo el top y bottom pegados a los bordes del contenedor.

.cabecera {
   width: 100%;
   height: 50px;
}

.cuerpo_expandible { 
  position: absolute;
  top: 50px;
  bottom: 0px;
} 

Así empieza donde termina la cabeceara y termina en la parte inferior de la pantalla.

Dicho esto, te propongo un enfoque mas contemporáneo.. esta opción hara mas fácil agregar un pie de pagina, asides, etc. Ademas no necesita una sección de tamaño fijo.

con flexbox

Este es otro enfoque para trabajar el layout de tu pagina. Es muy recomendable pues hoy por hoy, esta muy bien soportado.

* {
  padding: 0;
  margin: 0;
}
html,
body {
  width: 100%;
  height: 100%;
  background: blue;
}

/* flex box */

.contenedor {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.cabecera {
  background: red;
  flex: 0;
}
.contenido {
  flex: 1;
  background: #000;
  color: #fff;
}
<div class="contenedor">
  <div class="cabecera">
    <h1>Esto es la cabecera</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio explicabo quae sed nisi cupiditate mollitia praesentium, quisquam consequuntur expedita inventore eligendi placeat, ratione, ipsa reprehenderit voluptates deserunt, dicta facilis soluta.</p>
  </div>
  <div class="contenido">
    <p>contenido principal</p>
  </div>
</div>

1
  • 1
    +1 Te agradezco! Vi tu ejemplo y me puse a investigar un poco de la propiedad flex, me ayudo muchísimo y pude resolver el problema. Saludos y nuevamente gracias! el 2 jul. 2016 a las 17:24

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.