Ich habe ein div mit height: 100%;
, aber es funktioniert nicht. Wenn ich eine feste Höhe deklariere (zum Beispiel height: 600px;
), funktioniert sie, aber ich möchte ein responsives 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>
Sie müssen wahrscheinlich den Code unten angeben, damit height:100%
für Ihre divs funktioniert
html, body {margin:0;padding:0;height:100%;}
geige: http://jsfiddle.net/5KYC3/
Sie geben nicht die "Höhe" Ihrer HTML-Datei an. Wenn Sie einem Element einen Prozentsatz zuweisen (d. H. Divs), muss der css-Compiler die Größe des übergeordneten Elements kennen. Wenn Sie das nicht zuweisen, sollten Sie Divs ohne Höhe sehen.
Die gebräuchlichste Lösung besteht darin, die folgende Eigenschaft in css festzulegen:
html{
height: 100%;
margin: 0;
padding: 0;
}
Sie sagen zum html-Tag (html ist das übergeordnete Element aller html-Elemente) "Nimm die gesamte Höhe im HTML-Dokument"
Ich hoffe ich habe dir geholfen. Prost
Ich würde sagen, Sie haben zwei Möglichkeiten:
alle übergeordneten divs mit 100%
height (einschließlich body und html) formatieren
verwenden der absoluten Positionierung für eine der übergeordneten Divisionen (z. B. #content
) und anschließend alle untergeordneten Divs auf height 100%
Stellen Sie das enthaltende Element/div auf eine Höhe ein. Andernfalls bitten Sie den Browser, die Höhe eines unbekannten Werts auf 100% festzulegen. Dies ist jedoch nicht möglich.
Mehr Infos hier: http://webdesign.about.com/od/csstutorials/f/set-css-height-100-percent.htm
Die Antwort der Nacht ist richtig
html, body {margin:0;padding:0;height:100%;}
Vergewissern Sie sich auch, dass sich Ihr div oder Element NICHT in einem anderen befindet (mit einer Höhe von weniger als 100%) Hoffe, das hilft jemand anderem.
Für Code-Spiegel-Divs beziehen Sie sich auf das Handbuch. Diese Abschnitte können für Sie nützlich sein:
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);
}
}
});
Und werfen Sie auch einen Blick auf:
http://codemirror.net/demo/resize.html
Auch ein Kommentar:
Inline-Styling ist schrecklich. Sie sollten dies um jeden Preis vermeiden. Es wird Sie nicht nur verwirren, es ist eine schlechte Praxis.
Ich glaube, Sie müssen sicherstellen, dass für alle Container-Div-Tags oberhalb der 100% -Dicke auch die Höhe von 100% festgelegt ist, einschließlich Body-Tag und HTML.