wake-up-neo.com

CSS-Höhe 100% funktioniert nicht

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>
javascripthtmlcssheight
41
Pavel Sládek

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/

36
Night

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

21
Carlos Garnica Jr.

Ich würde sagen, Sie haben zwei Möglichkeiten:

  1. alle übergeordneten divs mit 100% height (einschließlich body und html) formatieren

  2. verwenden der absoluten Positionierung für eine der übergeordneten Divisionen (z. B. #content) und anschließend alle untergeordneten Divs auf height 100% 

6
nidzix

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

2
Bryan Myers

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.

1
G Jeny Ramirez

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.

0
mattdlockyer

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.

0
Lee Mandeville