Hauteur CSS 100% pourcentage ne fonctionne pas [dupliquer]
cette question a déjà une réponse ici:
- hauteur: 100% ne travaillant pas 9 réponses
j'ai un div avec height: 100%; mais ça ne marche pas. Quand je déclare une hauteur fixe (par exemple height: 600px; ) il fonctionne, mais je voudrais un design réactif.
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>
7 réponses
vous devez probablement déclarer le code ci-dessous pour height:100% pour travailler pour vos divs
html, body {margin:0;padding:0;height:100%;}
violon: http://jsfiddle.net/5KYC3 /
vous ne spécifiez pas la" hauteur " de votre html. Lorsque vous assignez un pourcentage dans un élément (c.-à-d. divs), le compilateur css doit connaître la taille de l'élément parent. Si vous n'assignez pas cela, vous devriez voir divs sans hauteur.
la solution la plus courante est de définir la propriété suivante dans css:
html{
height: 100%;
margin: 0;
padding: 0;
}
vous dites à la balise html (html est le parent de tous les éléments html) "prendre toute la hauteur dans le HTML document "
j'espère vous avoir aidé. Cheers
je dirais que vous avez deux options:
-
pour obtenir tous les divs parent coiffés de
100%hauteur (y compris le corps et html) -
pour utiliser le positionnement absolu pour l'un des divs parent (par exemple
#content) et puis tous les divs enfant réglé à la hauteur100%
régler l'élément/div contenant à une hauteur. Sinon, vous demandez au navigateur de définir la hauteur à 100% d'une valeur inconnue et il ne peut pas.
plus d'informations ici: http://webdesign.about.com/od/csstutorials/f/set-css-height-100-percent.htm
la réponse de Night est correcte
html, body {margin:0;padding:0;height:100%;}
vérifiez également que votre div ou élément n'est pas à l'intérieur d'un autre (avec une hauteur inférieure à 100%) Espérons que cela aide quelqu'un d'autre.
je crois que vous devez vous assurer que toutes les étiquettes container div au-dessus de la hauteur de 100% div a également 100% hauteur fixée sur eux, y compris l'étiquette de corps et html.
pour les divs miroir de code se référer au Manuel, ces sections peuvent vous être utiles:
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);
}
}
});
Et aussi jeter un oeil à:
http://codemirror.net/demo/resize.html
aussi un commentaire:
style Inline est horrible, vous devriez éviter cela à tout prix, non seulement sera ça t'embrouille, c'est de la mauvaise pratique.