Question

我正在编写一个网页，我需要一个包含两个div（一个工具栏和一个编辑器）的div包装器。工具栏高度未知，我需要让编辑器div填充包装器中的所有剩余空间。

解决方案需要是完整的HTML + CSS。

<div id="wrapper">
  <div id="toolbar">
  </div>
  <div id="editor">
  </div>
</div>

对于CSS：

#wrapper {
  position: absolute; // I need this, I can't remove it
  top: 0; // should stick on the top
  height: 100%; // should span across the whole height
  width: 100%; // Can be anything 0 ≤ width ≤ 100%
}

#editor {
  width: 100%; // fill the whole horizontal space
  height: 100%; // if I do so, the div gets too high and the #editor goes beyond the wrapper limit
}

这是一个与http://jsfiddle.net/o3hqyxxu/

一起玩的jsfidlle

Answer 1

一个选项是将div的显示设置为table和table-row：

#wrapper {
    position: absolute;
    top:0;
    height: 100%;
    width: 70%;
    display:table;
}
#a {
    background-color: grey;
    width: 100%:
}
#b {
    background-color: lightblue;
    height: 100%;
    width: 100%;
}
#a, #b {
    display:table-row;
}

<div id='wrapper'>
    <div id='a'>Some content that is long enough to fill a full line an even more, so you need to go back to the next line, … Ok, I think that is enough. If you have a wider screen, append text there :)</div>
    <div id='b'>I want this div to fill all the empty save, not more.</div>
</div>

Answer 2

如果我理解得很好，如果您在#editor上使用height:auto;而不是height:100%，那么它似乎对我有用。

Answer 3

我通过使用弹性框找到了我的答案的解决方案（参见the mdn documentation）。

我们的想法是使用css描述符display: flex和flex-flow: row作为容器，使用描述符flex: 0 1 auto作为工具栏/编辑器。

有一个jsfiddle解决方案here。

填写所有剩余空间

3 个答案: