Question

我有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>

Answer 1

您可能需要声明下面的代码height:100%才能为您的div工作

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

小提琴：http://jsfiddle.net/5KYC3/

Answer 2

你没有指定＆＃34;身高＆＃34;你的HTML。当您在元素中分配百分比（即div）时，css编译器需要知道父元素的大小。如果你不指定它，你应该看到没有高度的div。

最常见的解决方案是在css中设置以下属性：

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

你说的是html标签（html是所有html元素的父级）＆＃34;取得HTML文档中的所有高度＆＃34;

我希望我帮助过你。干杯

Answer 3

我想说你有两个选择：

获取所有以100%高度设置的父div（包括body和html）
对其中一个父div使用绝对定位（例如#content），然后将所有子div设置为高度100%

Answer 4

将包含元素/ div设置为高度。否则，您要求浏览器将高度设置为未知值的100％，但不能。

此处有更多信息：http://webdesign.about.com/od/csstutorials/f/set-css-height-100-percent.htm

Answer 5

夜晚的回答是正确的

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

同时检查你的div或元素是否在另一个内（高度小于100％）希望这有助于其他人。

Answer 6

我相信你需要确保100％高度div上方的所有容器div标签也设置了100％的高度，包括body标签和html。

Answer 7

对于代码镜像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

还有评论：

内联造型很可怕你应该不惜一切代价避免这种情况，不仅会让你感到困惑，而且这种做法很糟糕。

CSS高度100％不起作用

7 个答案: