Question

我正在开发一个全屏流体XHTML / CSS站点。在HTML页面中，我有一个div，它通过AJAX加载无序列表。因此，我事先无法知道div的高度。由于div的内容可能会超出文档的可见部分而破坏全屏布局，因此我想在必要时使用滚动条（使用CSS属性：overflow：auto;）。问题是溢出属性需要知道div的高度，这是我自己无法计算的。如何通过JQuery在CSS文件中表达div的高度？谢谢。

HTML：

<body> 
    <div id="container">
        <div id="header">
            <div id="header_content">Header</div>
        </div> 
        <div id="body">
            <div id="nav">
                <div id="nav_content">
                    <form id="form">
                    <fieldset>
                        <legend>Legend of form:</legend>
                                <input type="text" maxlength="500" />
                                <input class="button" type="submit" >
                    </fieldset>
                    </form>
                    <h3>List loaded via AJAX:</h3>
                    <div id="list"> 
                        <ul>
                            <li>Sample Text 1</li>
                            <li>Sample Text 2</li>
                            <li>Sample Text 3</li>
                            <li>Sample Text 4</li>
                            <li>Sample Text 5</li>
                            <li>Sample Text 6</li>
                            <li>Sample Text 7</li>
                            <li>Sample Text 8</li>
                            <li>Sample Text 9</li>
                            <li>...</li>
                        </ul>
                </div>
            </div>
            <div id="body_main">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nulla erat, rutrum vitae consectetur in, mattis quis est. Donec aliquam sodales viverra. Praesent varius purus et mi semper, in mattis orci tristique. Nam accumsan, ipsum nec lacinia aliquam, est lorem rhoncus leo, eget scelerisque erat eros non urna. Nunc vel odio et quam sodales varius in quis ante. Praesent felis ligula, facilisis in consequat quis, aliquam non metus. Integer vel massa ornare, porttitor erat in, laoreet sapien. Praesent lobortis eu ligula in imperdiet. Etiam pretium, mauris interdum auctor viverra, lectus neque tristique massa, a pellentesque leo sem non sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas eget purus sapien.</p>
                <p>Suspendisse varius nisl non eros fringilla luctus eget quis lacus. Nunc sit amet felis ante. Cras ac aliquet ligula. Nunc mollis sapien posuere libero ornare volutpat. Fusce tincidunt ipsum ante, vel vulputate sem venenatis id. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin quis dolor tortor. Sed vitae justo at metus tincidunt scelerisque sed non justo. Phasellus ligula nulla, fringilla ac urna eu, consequat tincidunt erat. Praesent faucibus porttitor nisi et rutrum. Nam ac arcu egestas, bibendum augue a, bibendum nibh. Vestibulum feugiat urna sit amet ante laoreet, vitae ullamcorper enim pulvinar.</p>
                <p>Nulla facilisi. Curabitur semper tincidunt feugiat. Donec bibendum, velit eu molestie consequat, leo massa pretium quam, ut iaculis orci eros accumsan augue. In hac habitasse platea dictumst. Etiam pharetra massa id est commodo imperdiet. Cras ac bibendum eros. Curabitur sodales consectetur est, dignissim condimentum orci commodo ultricies. In non tempus sem.</p>                
            </div>
        </div> 
    </div> 
</body> 

</html>

CSS：

html, body {
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
    }  
#header{
    height: 4.5em;
    background-color: #EFEFEF;
    position: relative;
} 
#header_content{
    padding: 1em;
    text-align: center;
} 
#container{
    height: 100%;
} 
#body{
    height: 100%;
    margin-top: -4.5em;
    background-color: #C7DFFA;
} 
#body_main{
    padding: 5em 1em 1em 7em;
} 
#nav{
    height: 100%;
    background-color: gray;
    width: 28%;
    float: left;
} 
#nav_content{
    padding: 5em 1em 1em 1em;
    overflow: auto;
} 
#nav_content form legend {
    font-weight: bold;
}
#list{
    height: 8em;
    overflow: auto;
}

Answer 1

问题是overflow属性需要知道div的高度

为什么？ overflow:scroll并不需要知道div的真实height，只需要height元素，在您的情况下，浏览器窗口的高度

看看这个：http://jsfiddle.net/zfUPr/1/

JQuery：计算div的高度

1 个答案: