0

我正在尝试实施类似于此处提供的解决方案： 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 中不起作用：（contentRel div 的高度设置为 400px - 与包装器 div 的高度）。有人知道如何解决吗？

这是我的问题描述（也许这是它的另一种解决方案）：

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

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

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

湾。有一些预定义高度的标题（上面示例中的 100% 组件标题部分）

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

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

4

0 回答 0