Quiero crear dos divs, uno debajo del otro sin JS y con soporte para IE8.

  • Cada uno tiene 100% de ancho.
  • Cada uno con posicionamiento relativo o absoluto para el diseño anidado.
  • Los div superiores tienen altura por contenido, no fijos (es importante) y div inferiores en todo el espacio restante.

En mi ejemplo bottom div es demasiado corto, ¿cómo puedo estirarlo hasta el fondo?

<html>
<head>
<style type="text/css"><!--
* {
    padding: 1px;
    margin: 0px;
    border: solid 1px;
    width: 100%;
}

#super {
    position: absolute;
    height: 100%;
}

#top {
    position: relative;
}

#bottom {
    position: relative;
    top: 0px;
    bottom: 0px;
}
--></style>

</head>
<body>
<div id="super">
<div id="top">top</div>
<div id="bottom">bottom</div>
</div>
</body>
</html>
1
GoodWasHere 4 ene. 2017 a las 09:18

4 respuestas

La mejor respuesta

Puede usar las propiedades de la tabla css para crear este diseño.

HTML:

<div id="super">
  <div id="top">
    <div class="content">
      top
    </div>
  </div>
  <div id="bottom">
    <div class="content">
      bottom
    </div>
  </div>
</div>

CSS necesario:

html,
body {
  height: 100%;
}
#super {
  height: 100%;
  width: 100%;
  display: table;
}
#super > div {
  display: table-row;
}
#top {
  background: green;
}
#bottom {
  background: blue;
}
html,
body {
  height: 100%;
  padding: 0;
  margin: 0;
}
#super {
  height: 100%;
  width: 100%;
  display: table;
}

#top {
  background: green;
  overflow: hidden;
  height: 1%;
}

.content {
  padding: 10px;
}

#bottom {
  background: blue;
}

#super > div {
  display: table-row;
}
<div id="super">
  <div id="top">
    <div class="content">
      top
    </div>
  </div>
  <div id="bottom">
    <div class="content">
      bottom</div>
  </div>
</div>

Imagen de salida:

Output Image

2
Mohammad Usman 4 ene. 2017 a las 06:28

Utilice flex-box

.parent{
  display: flex;
  flex-direction: column;
  min-height: 100vh
}
.child2{
  flex: 1;
  background: blue;
}
<div class="parent">
  <div class="child1"> first child</div>
  <div class="child2"> second child</div>
</div>

Demo aquí

1
Syam Pillai 4 ene. 2017 a las 06:58

Puede usar display: table para envolver el contenedor y la fila de la tabla para los divs superiores e inferiores:

* {
    padding: 1px;
    margin: 0px;
    border: solid 1px;
    width: 100%;
}
#super {
    display: table;
    position: absolute;
    height: 100vh;
}
#top {
    display: table-row;
    height: 1px;
    position: relative;
    background: orange;
}
#bottom {
    display: table-row;
    position: relative;
    top: 0px;
    bottom: 0px;
    background: teal;
}
<div id="super">
<div id="top">top<br>top text</div>
<div id="bottom">bottom</div>
</div>
1
Banzay 4 ene. 2017 a las 06:34

Pruebe esto :

#bottom {
position: relative;
top: 0px;
bottom: 0px;
HEIGHT: 800px;
}
0
RBT 4 ene. 2017 a las 06:42