¿< form > altura de corte: 100%?

más simple de las páginas para demostrar mi problema:¿< form > altura de corte: 100%?

<!DOCTYPE html> 
<html> 
    <head> 
     <style type="text/css"> 
      html, body 
      { 
       height: 100%; 
       overflow: hidden; 
      } 
      body 
      { 
       margin: 0; 
       padding: 0; 
      } 
      #container 
      { 
       background: red; 
       height: 100%; 
       overflow: hidden; 
      } 
     </style> 
    </head> 
    <body> 
     <div id="container"></div> 
    </body> 
</html>

div contenedor se llena correctamente la ventana del navegador con el rojo. Ahora envuelva el div en un formulario:

<body> 
    <form> 
     <div id="container"></div> 
    </form> 
</body>

y div-contenedor se derrumba. ¿Por qué? ¿Qué pasa con una etiqueta de formulario que "rompe" el "ancestro más cercano con altura"?

Fuente

2012-02-14 n8wrl

form es un elemento block, los elementos del bloque no tienen ninguna altura a menos que su contenido se expanda o se les dé una altura explícita. El ancestro más cercano de #container es form, y su altura es 0, entonces #container s la altura es 0.

Fuente

2012-02-14 15:50:37 zzzzBov

Yo no tenía forma idea era bloque – n8wrl

Para ser explícita, [ 'forma' es" flujo content "] (http://dev.w3.org/html5/spec/the-form-element.html#the-form-element), los navegadores usarán' display: block' de forma predeterminada. – zzzzBov

La altura del 100% depende de todos los antepasados que tengan una altura explícitamente declarada. Agregue una altura al FORM y su ejemplo debería funcionar.

HTML, BODY, FORM { 
    height: 100%; 
}

Lo mismo vale para cualquier valor porcentual. Si un elemento primario no tiene una altura especificada, su casilla se dimensionará en función del contenido. Por lo tanto, la altura del porcentaje del niño se basará en la altura que se calculó para su padre.

Fuente

2012-02-14 15:47:14

tratar,

<style type="text/css"> 
     html, body, form 
     { 
      height: 100%; 
      overflow: hidden; 
     }

<div id="container">&nbsp;</div>

a s'identifica html Comportament

Fuente

2012-02-14 15:52:13 Jones

Sólo

form { 
    overflow: hidden; 
}

Fuente

2013-02-05 18:14:58

Respuesta

Cuestiones relacionadas