web-dev-qa-db-fra.com

Hauteur CSS 100% ne fonctionne pas

J'ai un div avec height: 100%; mais ça ne marche pas. Lorsque je déclare une hauteur fixe (par exemple height: 600px;), cela fonctionne, mais j'aimerais 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>
javascripthtmlcssheight
41
Pavel Sládek

Vous devez probablement déclarer le code ci-dessous pour que height:100% fonctionne avec vos divs.

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

violon: http://jsfiddle.net/5KYC3/

36
Night

Vous ne spécifiez pas la "hauteur" de votre code HTML. Lorsque vous attribuez un pourcentage à un élément (par exemple, divs), le compilateur css doit connaître la taille de l’élément parent. Si vous n'attribuez pas cela, vous devriez voir des divs sans hauteur.

La solution la plus courante consiste à 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) "Prenez toute la hauteur du document HTML"

J'espère vous avoir aidé. À votre santé

21
Carlos Garnica Jr.

Je dirais que vous avez deux options:

  1. pour obtenir tous les divs parents stylés avec 100% height (y compris body et html)

  2. utiliser le positionnement absolu pour l'un des divs parents (par exemple, #content), puis pour tous les divs enfants réglés sur la hauteur 100% 

6
nidzix

Définissez l'élément conteneur/div sur une hauteur. Sinon, vous demandez au navigateur de régler la hauteur à 100% d'une valeur inconnue et ce n'est pas le cas. 

Plus d'infos ici: http://webdesign.about.com/od/csstutorials/f/set-css-height-100-percent.htm

2
Bryan Myers

La réponse de la nuit est correcte

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

Vérifiez également que votre div ou élément ne se trouve PAS dans un autre (avec une hauteur inférieure à 100%) J'espère que cela aidera quelqu'un d'autre.

1
G Jeny Ramirez

Pour les divs de code mirror, reportez-vous 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:

Le style en ligne est horrible, vous devez éviter cela à tout prix, non seulement cela vous dérangera, mais aussi une mauvaise pratique.

0
mattdlockyer

Je crois que vous devez vous assurer que toutes les balises conteneur div situées au-dessus de la div de 100% height ont également une hauteur définie à 100%, y compris la balise body et le code HTML.

0
Lee Mandeville