CSS高度100％不工作 [英] CSS height 100% percent not working

问题描述

我无法解决我的网络上div的高度的一个问题。请访问 http://playground.jsreport.net/ ，有一个代码镜像区域定义了height：100％;但它不工作。当我宣布修正高度（例如height：600px;）它是工作，但我想有响应的设计为这个网络。

I can't solve one problem with height of div on my web. Please visit http://playground.jsreport.net/, there is a code mirror area with defined "height: 100%;" but it's not working. When I declared fix height (for example height: 600px;) it is working, but I would like have responsive design for this web.

问题div的截图 http://2imgs.com/9b385872a1

有代码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

You probably need to declare the code below for height:100% to work for your divs

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

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

这篇关于CSS高度100％不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！