javascript - CSS 高度 100% 无效

标签 javascript html css height

<分区>

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

最佳答案

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

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

fiddle: http://jsfiddle.net/5KYC3/

关于javascript - CSS 高度 100% 无效,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21357238/

相关文章:

javascript - 具有滚动效果的固定背景?

javascript - 消失元素的 OnClick 事件

javascript 代码在浏览器中不起作用?

html - 错误 :Failed to execute 'atob' on 'Window' : The string to be decoded is not correctly encoded

html - 没有通用选择器就无法摆脱顶部填充

html - 仅在特定类下更改特定元素

CSS:制作标签式菜单。需要的想法

javascript - Canvas 圆弧清除

javascript - 对每个数组成员进行计算

javascript - 如何使用 JavaScript 获取跨浏览器的文字样式字符串?