Question

理想情况下，只使用CSS我想要一个高度动态的可分割div。

布局样机......

    <html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        .page {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;  
        }
        .top{
            height: 100px; background-color: Gray;
        }
        .middle {
            height: 150px; background-color: Green;
        }
        .bottom {
            overflow: auto;
        }
    </style>
</head>
<body>
<div class="page">
    <div class="top">
        top
    </div>
    <div class="middle">
        second
    </div>
    <div class="bottom">
        This one I want to be dynamic in height (stretch from here to the bottom of the window). <br />
        And scroll if the content if its bigger than the height allowed in the window.
        <p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p>
        <p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p>
        <p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p>
        <p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p>
        <p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p>
        <p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p>
        <p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p>
        <p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p>
        <p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p>
        <p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p>
        <p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p>
    </div>
</div>
</body>
</html>

.bottom是我想要延伸到浏览器底部的div ...然后在需要时滚动。

- 更新：掀起了一些javascript，它做得非常好......但是真的想要一个纯粹的css解决方案吗？

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"           type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        SetScrollableDivHeight($(".bottom"));
    });
    $(window).resize(function () {
        SetScrollableDivHeight($(".bottom"));
    });
    function SetScrollableDivHeight(div) {
        var top = div.position().top;
        var windowH = $(document).height();
        var remaining = windowH - top;

        div.height(remaining - 25);
    }
</script>

Answer 1

根据上面的代码：

.page { ... height:100%;... }
.bottom { height:100%; overflow:auto; }

只要它的父级具有高度属性.bottom，它将仅扩展到其父级的高度。这也适用于.page。

Answer 2

只需将您想要的大小设置为div，然后您必须添加overflow: auto css样式。

例如，将scrollable类添加到div并将以下样式添加到css中：

.scrollable {
   overflow: auto;
}

只要div的内容太大，就会出现滚动条。您可以使用其他值强制滚动条外观而不是自动，请参阅：http://www.w3schools.com/css/pr_pos_overflow.asp

动态高度可滚动div

2 个答案: