CSS高度100％不起作用[重复]

Posted 2023-03-06

【中文标题】CSS高度100％不起作用[重复]

【英文标题】：CSS height 100% percent not working [duplicate]

【发布时间】：2014-02-16 21:32:02

【问题描述】：

我有一个带有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   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>

【问题讨论】：

iframe 没有自动高度。您必须使用 javascript 获取它并定义它。如果您希望它响应，您可以使用窗口调整大小功能

Origin of the blink tag

【参考方案1】：

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

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

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

【讨论】：

这对我有用。

【参考方案2】：

您没有指定 html 的“高度”。当您在元素（即 div）中分配百分比时，css 编译器需要知道父元素的大小。如果您不指定它，您应该会看到没有高度的 div。

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

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

你是在对 html 标签（html 是所有 html 元素的父级）说“获取 HTML 文档中的所有高度”

希望对你有所帮助。干杯

【讨论】：

如何分配元素相对于页面高度的高度？

【参考方案3】：

我会说你有两个选择：

获取所有父 div 样式为 100% 高度（包括正文和 html）

为父 div 之一使用绝对定位（例如 #content），然后将所有子 div 设置为高度 100%

【讨论】：

位置固定也可以。

【参考方案4】：

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

更多信息在这里：http://webdesign.about.com/od/csstutorials/f/set-css-height-100-percent.htm

【讨论】：

这不是未知的，浏览器已经计算了每个元素的值。这不是未知的

【参考方案5】：

我认为您需要确保所有高于 100% 高度 div 的容器 div 标签也设置了 100% 高度，包括 body 标签和 html。

【参考方案6】：

有关代码镜像 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

还有一条评论：

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

【参考方案7】：

夜的答案是正确的

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

还要检查您的 div 或元素是否不在另一个中（高度小于 100%） 希望这对其他人有帮助。

【讨论】：

答案是正确的。 html, body 必须是高度 100%。您想要的 div 必须是 100% + body 和您要设置的 div 之间的所有父母。