Question

我是HTML / CSS的新手，所以请耐心等待。我在SO和其他地方看到过类似的问题，但在我的案例中无法让它们起作用。我有一个简单的两列布局。左栏显示顶部有“固定高度”的“过滤器”文本框，下面是TreeView（ASP.NET）。由于TreeView似乎没有任何支持滚动的属性，我将它封装在另一个div中。右列将显示基于所选树节点的结果。

这是我的HTML：

<body class="page">
    <div class="leftCol">
        <div>
            <input type="text" id="txtFilter" class="SearchTextBox" />
        </div>
        <div id="ForScrollBar" style="height: 100%;">
            A TREEVIEW HERE
        </div>
    </div>
    <div class="rightCol">
    </div>
    <div style="clear: both;"/>
</body>

这是我的CSS：

<style>
    .page
    {
        width: 900px;
        margin: 0px auto 0px auto;
        border: 1px solid #496077;
        min-height: 460px;
        height: 100%;
    }

    .leftCol
    {
        position: relative;
        border: 1px solid;
        float: left;
        width: 275px;
        height: 450px;
        min-height: 450px;
    }

    .rightCol
    {
        position: relative;
        border: 1px solid;
        float: right;
        width: 620px;
        height: 450px;
        min-height: 450px;
    }

    .SearchTextBox
    {
        border-style: solid;
        border-width: 1px;
        height: 30px;
        width: 270px;
        margin: 0px;
    }
</style>

现在我面临以下问题：

div“ForScrollBar”溢出父div divCol，即使我已将其设置为100％并期望它填充leftCol的剩余高度。
我希望身体能够填充页面高度，但无法使其工作。

非常感谢任何帮助。

注意：如果可能的话，我希望避免使用JS或jQuery，但如果它是浏览器兼容性的唯一方法，那么我会这样做。

Answer 1

设置height:100%表示子项将继承父项的完整高度。如果您有多个孩子，每个孩子都是100％，那么每个孩子都将占据父母的全部身高。最简单的解决方案是在px中设置固定高度 - 或者您可以为每个子项指定%值，最多可加100个。

或者，您可以允许标题具有固定的高度，并使用可滚动区域使用display: table和display: table-row来表示剩余空间。

http://jsfiddle.net/Cxj4b/1/

此外，您可能拥有更多的元素，因此请尽量避免使用ID，除非您想暗示页面上只应存在一个ID（例如#page本身）。

Answer 2

试试这个dotNET。使用％，以便将对象放置在所需位置。

CSS

<style>
.page
{
    width: 99%;
    margin: 0px auto 0px auto;
    border: 1px solid #496077;
    min-height: 460px;
    height: 99%;
}

.leftCol
{
    position: relative;
    border: 1px solid;
    float: left;
    width: 25%;
    height: 100%;
    min-height: 450px;
}

.rightCol
{
    position: relative;
    border: 1px solid;
    //float: right;
margin-left:25%;
    width: 75%;
    height: 100%;
}

.SearchTextBox
{
    border-style: solid;
    border-width: 1px;
    height: 5%;
    width: 100%;
    margin: 0px;
}

</style>

HTML

<body class="page">
<div class="leftCol">
    <div id="inputBox" class="SearchTextBox">
        <input type="text" id="txtFilter" style="position:relative;width:95%"/>
    </div>
    <div id="ForScrollBar" style="height: 94%;">
        A TREEVIEW HERE
    </div>
</div>
<div class="rightCol">
</div>
<div style="clear: both;"/>
</body>

拉伸div以填充父级中的剩余空间

2 个答案: