web-dev-qa-db-ja.com

CSSの高さ100％が機能しない

height: 100%;のdivがありますが、機能していません。固定の高さ（たとえばheight: 600px;）を宣言すると機能しますが、レスポンシブデザインが必要です。

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

おそらくheight:100%がdivで機能するためには、以下のコードを宣言する必要があります

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

フィドル： http://jsfiddle.net/5KYC3/

38
Night

Htmlの「高さ」を指定していません。要素（つまりdiv）にパーセンテージを割り当てる場合、cssコンパイラは親要素のサイズを知る必要があります。割り当てない場合、高さのないdivが表示されるはずです。

最も一般的な解決策は、cssで次のプロパティを設定することです。

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

あなたはhtmlタグに言っています（htmlはすべてのhtml要素の親です）「HTMLドキュメントのすべての高さを取得する」

お役に立てば幸いです。乾杯

22
Carlos Garnica Jr.

次の2つのオプションがあると思います。

  1. 100% height（bodyとhtmlを含む）スタイルのすべての親divを取得するには

  2. 親divの1つ（たとえば#content）に絶対配置を使用し、次にすべての子divをheight 100%に設定する

6
nidzix

含む要素/ divを高さに設定します。それ以外の場合は、ブラウザに高さを不明な値の100％に設定するよう要求しますが、できません。

詳細はこちら： http://webdesign.about.com/od/csstutorials/f/set-css-height-100-percent.htm

2
Bryan Myers

夜の答えは正しい

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

また、divまたは要素が別のもの（高さ100％未満）内にないことを確認してください。これが他の人に役立つことを願っています。

1
G Jeny Ramirez

コードミラーdivについては、マニュアルを参照してください。これらのセクションが役立つ場合があります。

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

また、以下もご覧ください。

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

またコメント：

インラインスタイリングは恐ろしいので、これを避ける必要があります。それは混乱を招くだけでなく、悪い習慣です。

0
mattdlockyer

100％の高さのdivより上のすべてのコンテナdivタグにも、bodyタグとhtmlを含む100％の高さが設定されていることを確認する必要があると思います。

0
Lee Mandeville