funciona - javascript español

Altura de CSS 100% por ciento no funciona

Question

Esta pregunta ya tiene una respuesta aquí:

• altura: 100% no funciona 9 respuestas

Tengo un div con height: 100%; pero no está funcionando. Cuando declaro una altura fija (por ejemplo, height: 600px; ) está funcionando, pero me gustaría un diseño receptivo.

html:

<blink><div class="row-fluid split-pane fixed-left" style="position: relative; height: 78%;">
<div class="split-pane-component" style="position: relative; width: 50em;">
<div style="">
<ul class="nav nav-tabs">
<li class="active"><a href="#html" data-toggle="tab">Html</a></li>
<li><a href="#helpers" data-toggle="tab">Helpers</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="html" style="height: 100%;">
<textarea id="htmlArea" style="height: 100%;">{{:html}}</textarea>
</div>
<div class="tab-pane" id="helpers" style="height: 100%;">
<textarea id="helpersArea">{{:helpers}}</textarea>
</div>
</div>
</div>
</div>
<div class="split-pane-divider" id="my-divider" style="left: 50em; width: 5px;"></div>
<div class="split-pane-component" style="left: 50em; margin-left: 5px;">
<div style="">
<ul class="nav nav-tabs">
<li>
<a href="#" class="active">Preview
<img width="22px" height="16px" class="preview-loader" src="img/spinner-green2.gif" style="display: none" />
</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" style="height: 100%;">
<iframe name="previewFrame" frameborder="0" allowtransparency="true" allowfullscreen="true" style="width: 100%; height: 100%;"></iframe>
</div>
</div>
</div>
</div>
</div>
</blink>

Answer 1

Creo que debes asegurarte de que todas las etiquetas div del contenedor encima del divisor de altura del 100% también tengan una altura del 100%, incluida la etiqueta del cuerpo y html.

Answer 2

Establezca el elemento / div contenedor a una altura. De lo contrario, pedirle al navegador que establezca la altura en 100% de un valor desconocido y no puede.

Más información aquí: http://webdesign.about.com/od/csstutorials/f/set-css-height-100-percent.htm

Answer 3

La respuesta de la noche es correcta

 html, body {margin:0;padding:0;height:100%;}

También verifique que su div o elemento NO se encuentre dentro de otro (con una altura inferior al 100%) Espero que esto ayude a otra persona.

Answer 4

No está especificando la "altura" de su html. Cuando asigna un porcentaje en un elemento (es decir, divs), el compilador de css necesita conocer el tamaño del elemento principal. Si no asigna eso, debería ver divs sin altura.

La solución más común es establecer la siguiente propiedad en css:

html{
height: 100%;
margin: 0;
padding: 0;
}

Usted está diciendo a la etiqueta html (html es el padre de todos los elementos html) "Tome toda la altura en el documento HTML"

Espero haberte ayudado. Aclamaciones

Answer 5

Para ver los divisores de código, consulte el manual, estas secciones pueden ser útiles para usted:

http://codemirror.net/demo/fullscreen.html

var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
lineNumbers: true,
theme: "night",
extraKeys: {
"F11": function(cm) {
cm.setOption("fullScreen", !cm.getOption("fullScreen"));
},
"Esc": function(cm) {
if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
}
}
});

Y también eche un vistazo a:

http://codemirror.net/demo/resize.html

También un comentario:

El estilo en línea es horrible, debes evitar esto a toda costa, no solo te confundirá, es una práctica pobre.

Answer 6

Probablemente necesites declarar el siguiente código para la height:100% para trabajar para tus divs.

html, body {margin:0;padding:0;height:100%;}

violín: http://jsfiddle.net/5KYC3/

Answer 7

Yo diría que tienes dos opciones:

1. obtener todos los divs parentales con 100% altura del 100% (incluido body y html)

2. utilizar el posicionamiento absoluto para uno de los divs parentales (por ejemplo, #content ) y luego todos los divs secundarios configurados en altura 100%