¿Por qué la altura no: el 100% funciona para expandir divs a la altura de la pantalla?

295

Quiero que el carrusel DIV (s7) se expanda a la altura de toda la pantalla. No tengo idea de por qué no está teniendo éxito. Para ver la página puedes ir aquí .

body {
  height: 100%;
  color: #FFF;
  font: normal 28px/28px'HelveticaWorldRegular', Helvetica, Arial, Sans-Serif;
  background: #222 url('') no-repeat center center fixed;
  overflow: hidden;
  background-size: cover;
  margin: 0;
  padding: 0;
}
.holder {
  height: 100%;
  margin: auto;
}
#s7 {
  width: 100%;
  height: 100%: margin: auto;
  overflow: hidden;
  z-index: 1;
}
#s7 #posts {
  width: 100%;
  min-height: 100%;
  color: #FFF;
  font-size: 13px;
  text-align: left;
  line-height: 16px;
  margin: auto;
  background: #AAA;
}

<div class="nav">
  <a class="prev2" id="prev2" href="#">
    <img src="http://static.tumblr.com/ux4v5bf/ASslogxz4/left.png">
  </a>
  <a class="next2" id="next2" href="#">
    <img src="http://static.tumblr.com/ux4v5bf/swslogxmg/right.png">
  </a>
</div>

<div class="holder">
  <tr>
    <td>
      <div id="s7">
        {block:Posts}
        <div id="posts">

Expandir fragmento

html css height

— Earl Larson
fuente

2

Aquí hay una explicación simple y clara: stackoverflow.com/a/31728799/3597276

— Michael Benjamin

probablemente la mejor solución para elementos anidados que no deberían extenderse a la altura de toda la ventana stackoverflow.com/questions/7049875/height-100-not-working/…

— B-GangsteR

409

Para que un valor porcentual funcione para la altura, se debe determinar la altura de los padres. La única excepción es el elemento raíz<html> , que puede ser un porcentaje de altura. .

Entonces, has dado todos los elementos de altura, excepto el <html>, así que lo que debes hacer es agregar esto:

html {
    height: 100%;
}

Y tu código debería funcionar bien.

* { padding: 0; margin: 0; }
html, body, #fullheight {
    min-height: 100% !important;
    height: 100%;
}
#fullheight {
    width: 250px;
    background: blue;
}

<div id=fullheight>
  Lorem Ipsum        
</div>

Expandir fragmento

JsFiddle ejemplo .

— El fantasma de Madara
fuente

23

Ok, esto podría hacerme parecer increíblemente estúpido, pero lo que sea : ¿Quieres decir que <html>es un elemento real , como <p>o <img />? Pensé que el único propósito de <html>era definir el principio y el final de un documento HTML. Quiero decir, pensé que estaba allí, no para el diseño, sino solo para que el navegador sepa qué tipo de documento está mirando. Estoy completamente alucinado.

— jay_t55

29

@Joey: HTML es un elemento real. Puede diseñarlo con CSS, enganchar eventos en JavaScript, agregar clases e ID y aparecerá en el DOM. El navegador asumirá un documento HTML incluso sin la <html>etiqueta, e incluso sin los elementos <head>o <body>. Sin embargo, las especificaciones HTML consideran que la <html>etiqueta es obligatoria. En resumen, sí, es un elemento completo como todos los demás elementos HTML.

— El fantasma de Madara

1

@SecondRikudo: No, la <html>etiqueta es opcional de acuerdo con las especificaciones (por ejemplo, HTML4 y HTML5). Y sí, el elemento se crea de todos modos.

— Robert Siemer

2

hmmm ... para mí, la única forma en que esto funcionó fue establecer ambos htmly bodycomo height: 100%(así como, por supuesto, el específico divque quiero heredar al 100% de altura)

— James

1

@james Sí, todos los padres deben tener una altura conocida.

— El fantasma de Madara

147

_{Como nadie ha mencionado esto ...}

Enfoque moderno:

Como alternativa a establecer las alturas del elemento html/ , también puede usar longitudes de porcentaje de ventana gráfica:body100%

5.1.2. Longitudes de porcentaje de ventana gráfica: las unidades 'vw', 'vh', 'vmin', 'vmax'

Las longitudes de porcentaje de ventana gráfica son relativas al tamaño del bloque contenedor inicial. Cuando se cambia la altura o el ancho del bloque contenedor inicial, se escalan en consecuencia.

En este caso, puede usar el valor 100vh(que es la altura de la ventana gráfica) - (ejemplo)

body {
    height: 100vh;
}

Establecer a min-heighttambién funciona. (ejemplo)

body {
    min-height: 100vh;
}

Estas unidades son compatibles con la mayoría de los navegadores modernos. Puede encontrar asistencia aquí .

— Josh Crozier
fuente

1

No veo ningún beneficio para esto en absoluto. ¿No crea trabajo adicional para el navegador que necesita calcular todo lo relacionado con la ventana gráfica del navegador? El tamaño de la ventana gráfica solo parece beneficioso cuando realmente desea dimensionar algo relacionado con la altura del navegador.

— Robert fue el

12

@RobertWent Hay beneficios. Por ejemplo, height: 100%solo funciona si el elemento padre tiene una altura definida. Ciertamente, hay algunos casos en los que el elemento primario de un elemento no tiene una altura definida y las unidades de porcentaje de ventana resuelven eso. En otras palabras, si tuviera un elemento profundamente anidado, simplemente podría establecerlo 100vh, y tendría una altura del 100%navegador. Es posible que no vea ningún beneficio, pero he estado en numerosos casos donde fueron la única solución. Es posible que estas unidades no sean tan beneficiosas para los elementos raíz como html/ body, pero no obstante, esta es una alternativa

— Josh Crozier el

2

Pero estamos hablando del elemento del cuerpo, no de un elemento profundamente anidado. Solo hay un posible padre, el elemento html. Es por eso que mencioné que no veo ningún beneficio y que posiblemente sea peor que solo establecer el 100%. Tu comentario no dice nada para hacerme delgada de otra manera. El hecho de que algo sea nuevo no lo mejora. Sin embargo, es una alternativa.

— Robert fue el

44

Un problema con este enfoque es que los iPhones excluyen la barra de direcciones y la navegación inferior de la altura de la vista, lo que significa body { height: 100vh }que tendrá una barra de desplazamiento en la carga de la página inicial.

— BHOLT

2

Agradable. Intenté el otro enfoque, puse height: 100% !important" to each parent til html` sin éxito, pude ver en el dom que cada nodo del árbol era en realidad, 100%pero no pude establecer el 100% en el elemento deseado, pero con el estilo de la ventana gráfica fue fácil

— pmiranda

25

También deberá establecer una altura del 100% en el htmlelemento:

html { height:100%; }

— shanethehat
fuente

20

Alternativamente, si se utiliza position: absolutea continuación, height: 100%funcionará bien.

— Steve Tauber
fuente

44

Sería una gran solución si no estuviera usando flexbox para crear mi diseño. : /

— Landon Llame el

2

No te olvides de establecer width:100%;y el padre position:relative;.

— Kai Noack

8

Deberías probar con los elementos principales;

html, body, form, main {
    height: 100%;
}

Entonces esto será suficiente:

#s7 {
   height: 100%;
}

— mrbengi
fuente

5

si desea, por ejemplo, una columna izquierda (altura 100%) y el contenido (altura automática) puede usar absoluto:

#left_column {
    float:left;
    position: absolute;
    max-height:100%;
    height:auto !important;
    height: 100%;
    overflow: hidden;

    width : 180px; /* for example */
}

#left_column div {
    height: 2000px;
}

#right_column {
    float:left;
    height:100%;
    margin-left : 180px; /* left column's width */
}

en html:

  <div id="content">
      <div id="left_column">
        my navigation content
        <div></div>
      </div>

      <div id="right_column">
        my content
      </div>
   </div>

— YellowMart
fuente

2

Esto puede no ser ideal, pero siempre puedes hacerlo con javascript. O en mi caso jQuery

<script>
var newheight = $('.innerdiv').css('height');
$('.mainwrapper').css('height', newheight);
</script>

— oBo
fuente

55

Nunca es una buena idea usar javascript cuando css solo será suficiente.

— Bosworth99

1

¿Por qué incluso hacer algo como esto y complicarlo más de lo que debería ser? No entiendo algunas respuestas lol ...

— CapturedTree

1

En la fuente de la página veo lo siguiente:

<div class="holder"> 
    <div id="s7" style="position: relative; width: 1366px; height: 474px; overflow: hidden;">

Si coloca el valor de altura en la etiqueta, lo usará en lugar de la altura definida en el archivo css.

— Steven
fuente

Eso es extraño porque esto es lo que veo en la fuente de la página: <div class = "holder"> <tr> <td> <div id = "s7"> <div id = "posts">

— Earl Larson

Ok, aunque no sé cómo obtuviste el código anterior, entré y cambié <div id = "s7"> a <div id = "s7" style = "height: 100%;"> y funcionó. ¿Quizás me está ocultando algo? De cualquier manera gracias :)

— Earl Larson

1

Si posiciona absolutamente los elementos dentro del div, puede establecer el relleno superior e inferior al 50%.

Entonces algo como esto:

#s7 {
    position: relative;
    width:100%;
    padding: 50% 0;
    margin:auto;
    overflow: hidden;
    z-index:1;
}

— Keith Brown
fuente

1

No veo cómo esto podría funcionar, ya que el 50% es relativo al ancho, no a la altura del elemento que lo contiene, ¿o me falta algo aquí?

— DrLightman

0

Aquí hay otra solución para las personas que no quieren usar html, body, .blah { height: 100% }.

.app {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow-y: auto;
}

.full-height {
  height: 100%;
}

.test {
  width: 10px;
  background: red;
}

<div class="app">
  <div class="full-height test">
  </div>
  Scroll works too
</div>

Expandir fragmento

— TheMisir
fuente