CSS 高度 100% 不起作用

IT技术 javascript html css height
2021-02-28 18:18:59

我有一个 div，height: 100%;但它不起作用。当我声明一个固定的高度时（例如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>
6个回答

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

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

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

这对我有用。
2021-05-06 18:18:59

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

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

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

您正在对 html 标签（html 是所有 html 元素的父元素）说“占据 HTML 文档中的所有高度”

我希望我帮助了你。干杯

如何相对于页面高度分配元素的高度？
2021-04-20 18:18:59

我会说你有两个选择：

  1. 获取所有带有100%高度样式的父 div （包括 body 和 html）

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

位置固定也有效。
2021-04-22 18:18:59

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

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

这不是未知的，浏览器已经计算了每个元素的值。这不是未知的
2021-05-06 18:18:59

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

其它你可能感兴趣的问题
上一篇使用 jQuery Select2 清除下拉列表 下一篇JavaScript 双美元符号