1

我是 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>

现在我面临以下问题：

  1. div“ForScrollBar”从父 div leftCol 溢出，即使我已将其设置为 100% 并希望它填充 leftCol 的剩余高度。
  2. 我希望正文填充页面高度，但无法使其正常工作。

任何帮助将不胜感激。

注意：如果可能的话，我很想避免使用 JS 或 jQuery，但如果它是具有浏览器兼容性的唯一方法，我会选择它。

4

2 回答 2

0

试试这个 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>
于 2013-01-28T05:34:46.923 回答
0

设置height:100%意味着子级将继承父级的全高。如果您有多个孩子，每个孩子都是 100%，那么每个孩子都将占据父母的全高。最简单的解决方案是设置一个固定的高度px- 或者您可以%为每个孩子指定值，加起来为 100。

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

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

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

于 2013-01-28T05:20:12.740 回答