CSS-hoogte 100% procent werkt niet

Ik heb een div met height: 100%;maar het werkt niet. Wanneer ik een vaste hoogte declareer (bijvoorbeeld height: 600px;) werkt het, maar ik wil een responsive design.

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>

Antwoord 1, autoriteit 100%

U moet waarschijnlijk de onderstaande code declareren om height:100%te laten werken voor uw divs

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

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

Antwoord 2, autoriteit 49%

U geeft niet de “hoogte” van uw html op. Wanneer u een percentage in een element (d.w.z. divs) toewijst, moet de css-compiler de grootte van het bovenliggende element weten. Als je dat niet toewijst, zou je divs zonder hoogte moeten zien.

De meest gebruikelijke oplossing is om de volgende eigenschap in css in te stellen:

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

Je zegt tegen de html-tag (html is de ouder van alle html-elementen) “Neem alle hoogte in het HTML-document”

Ik hoop dat ik je heb geholpen. Proost

Antwoord 3, autoriteit 18%

Ik zou zeggen dat je twee opties hebt:

1. om alle bovenliggende div’s op te maken met een hoogte van 100%(inclusief body en html)

2. om absolute positionering te gebruiken voor een van de bovenliggende div’s (bijvoorbeeld #content) en vervolgens alle onderliggende div’s in te stellen op hoogte 100%

Antwoord 4, autoriteit 8%

Stel het bevattende element/div in op een hoogte. Anders vraagt u de browser om de hoogte in te stellen op 100% van een onbekende waarde en dat kan niet.

Meer info hier: http:// webdesign.about.com/od/csstutorials/f/set-css-height-100-percent.htm

Antwoord 5

Ik denk dat je ervoor moet zorgen dat alle container-div-tags boven de 100% hoogte-div ook 100% hoogte hebben, inclusief de body-tag en html.

Antwoord 6

Raadpleeg de handleiding voor code-mirror-divs, deze secties kunnen nuttig voor u zijn:

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);
    }
  }
});

En kijk ook eens naar:

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

Ook een opmerking:

Inline-styling is verschrikkelijk, je moet dit koste wat kost vermijden, het zal je niet alleen verwarren, het is ook een slechte gewoonte.

Antwoord 7

Het antwoord van Night is correct

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

Controleer ook of uw div of element zich NIET in een andere bevindt (met een hoogte van minder dan 100%)
Ik hoop dat dit iemand anders helpt.