Question

我正在尝试实施类似于此处提供的解决方案： https://stackoverflow.com/a/12242226

它的问题（对我而言）是它不允许限制内部div的高度。所以我更新了解决方案如下：

<style type='text/css'>
html, body {
    height: 400px;
    width: 100%;
    margin: 0;
}
.wrapper {
    display: table;
    height: 400px;
    width: 100%;
    background: yellow;
}
.component {
    display: table-row;
    background: gray;
}
.content {
    display: table-cell;  /* height is dynamic, and will expand... */
    height: 100%;        /* ...as content is added (won't scroll) */
    background: turquoise;
}

.contentRel {
    height: 100%;
        background: blue;
    position: relative;
}

.contentRemaining {
        background: red;
    position: absolute;
    top:30px;
    bottom:0;
    left: 0;
    right: 0;
    overflow: auto;
}


  </style>

<body>
  <div class="wrapper">
    <div class="component">
        <h1>Component</h1>
        <p>of variable height</p>
    </div>
    <div class="content">
        <div class='contentRel'>
            <div>100% Component Header</div>
        <div class='contentRemaining'>
            <div style='height:1000px'>
            100% Component Content
            </div>
        </div>
        </div>
    </div>
    <div class="component">
        <h3>Other</h3>
        <p>componet of variable height</p>
    </div>
</div>


</body>

http://jsfiddle.net/UrcV7/

它在FF中需要工作（contentRel div的高度设置为320px - 包装div的高度减去组件div的高度之和），但在IE中不起作用：height的（contentRel div设置为400px - 与包装div的高度相同）。有人知道如何解决它吗？

这是我的问题描述（可能是另一种解决方案）：

我有一个外部div，其高度设置为某些px值（示例中为包装div）。
在那个div中我有几个其他div可以被一些JS代码动态隐藏。
除了1之外的所有div都有一些高度。虽然我不知道（例子中的组件div）。

我希望剩下一个div（示例中的内容div）：

一个。使用包装器div的所有剩余高度

湾有一个预定义高度的标题（上面例子中100％组件标题部分）

℃。有一个高度为“内容div的100％”的子div - “标题的高度”（以上示例中的100％组件内容）

d。不要高于“包装div的高度减去组件div的高度之和”（滚动条可以）

使用具有未知其他div高度的CSS将div设置为使用剩余高度

0 个答案: