html - 如何制作 html/css 3 行布局，其中中间行适合剩余内容且不展开父级

Question

我需要创建一个 3 行布局，它将位于 flex 3 列布局的中间列内。

布局应填充此中间列 (100%,100%) 并应包含：

• 顶行：可以为空或有内容。它的高度应该是自动的，并且应该扩展到它的内容。
• 底行：与顶行相同。
• 中心行：应该填充垂直空间的其余部分，并且不应该使整个结构超出最初的范围

这是一个图形描述：

我第一次尝试使用表格，但是有一个问题，当中心单元格展开时，它会扩大整个表格并且表格不会尊重高度。

接下来我尝试了 display:flex 并遇到了基本相同的问题，当中心 div 会获得很多内容时，内部内容不会滚动，但 div 会扩展到可用空间之外。

我正在努力按预期完成这项工作......

这是我失败的尝试之一：

https://jsfiddle.net/zm12bgxq/

$("#fillme").click(() => {
  $("#row-center").empty();
  let pre = $("<pre>");
  pre.css({
    "white-space": "pre-wrap",
    "overflow-y": "scroll",
    "overflow-x": "auto"
  })
  $("#row-center").append(pre);
  for (let i = 0; i < 100; i++) {
    pre.append("<span>Some long text, Some long text, Some long text, Some long text, Some long text, Some long text, Some long text<br></span>")
  }
})

html,
body {
  width: 100%;
  height: 100%;
}

#body {
  position: relative;
  top: 50px;
  left: 50px;
  height: 50%;
  width: 50%;
  background-color: green;
  display: flex;
  flex-direction: column;
}

#mainWin,
#content-wrapper {
  position: relative;
  width: 100%;
}

#content-wrapper {
  height: 100%;
}

#mainWin {
  flex: 1;
}

#menuBar {
  background-color: red;
  height: 40px;
  position: relative;
}

#content-wrapper {
  height: 100%;
  width: 100%;
  display: flex;
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

#column-left {
  flex-direction: row;
  display: block;
  position: relative;
  width: auto;
  height: 100%;
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background-color: green;
}

#column-right {
  flex-direction: row;
  display: block;
  position: relative;
  width: auto;
  height: 100%;
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background-color: green;
}

#column-center {
  flex-direction: row;
  display: flex;
  position: relative;
  height: 100%;
  flex: 1;
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background-color: yellow;
}

#center-content {
  display: flex;
  position: relative;
  height: 100%;
  width: 100%;
  flex-direction: column;
}

#center-content table {
  width: 100%;
  height: 100%;
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border-collapse: collapse;
  border-spacing: 0;
}

#center-content tr {
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

#center-content td {
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

#row-top {
  position: relative;
  width: 100%;
  height: 1%;
  flex-direction: column;
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background-color: blue;
}

#row-center {
  width: 100%;
  height: auto;
  position: relative;
  flex: 1;
  flex-direction: row;
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background-color: white;
}

#row-bottom {
  position: relative;
  width: 100%;
  height: 1%;
  flex-direction: row;
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background-color: magenta;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="body">
  <div id="menuBar">
    <ul>
      <li>Somemenu</li>
    </ul>
  </div>
  <div id="mainWin">
    <div id="content-wrapper">
      <div id="column-left">
        Left
      </div>
      <div id="column-center">
        <div id="center-content">
          <table>
            <tbody>
              <tr>
                <td id="row-top">Top</td>
              </tr>
              <tr>
                <td id="row-center">
                  <button id="fillme">
                Fill me
              </button>
                </td>
              </tr>
              <tr>
                <td id="row-bottom">
                  <div id="cmdCont">
                    <textarea autofocus="" rows="1" style="width:100%;height: 20px;"></textarea>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <div id="column-right">
        Right
      </div>
    </div>
  </div>
</div>

在这里它看起来没问题，直到您按下按钮并且白框展开表格......即使表格具有固定大小（50％的父级）。pre 有一个滚动条，但由于它已扩展到最大值，因此没有任何意义......

应该发生的是白框保持相同大小并且 pre 填充它并且 pre 得到一个实际滚动的滚动条。

另一个问题是在 pre 上有“white-space: pre”，它不应该水平扩展白框。它应该被剪裁，或者如果我放了溢出-x：滚动，那么它应该可以通过滚动 pre 来查看。

标签： htmlcss

Answer 1

你不能像这样简单地添加一个类......

pre {
 height: 100%;
 position: absolute;
 top: 0;
}

$("#fillme").click(() => {
  $("#row-center").empty();
  let pre = $("<pre>");
  pre.css({
    "white-space": "pre-wrap",
    "overflow-y": "scroll",
    "overflow-x": "auto"
  })
  $("#row-center").append(pre);
  for (let i = 0; i < 100; i++) {
    pre.append("<span>Some long text, Some long text, Some long text, Some long text, Some long text, Some long text, Some long text<br></span>")
  }
})

pre {
 height: 100%;
 position: absolute;
 top: 0;
}
  
html,
body {
  width: 100%;
  height: 100%;
}

#body {
  position: relative;
  top: 50px;
  left: 50px;
  height: 50%;
  width: 50%;
  background-color: green;
  display: flex;
  flex-direction: column;
}

#mainWin,
#content-wrapper {
  position: relative;
  width: 100%;
}

#content-wrapper {
  height: 100%;
}

#mainWin {
  flex: 1;
}

#menuBar {
  background-color: red;
  height: 40px;
  position: relative;
}

#content-wrapper {
  height: 100%;
  width: 100%;
  display: flex;
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

#column-left {
  flex-direction: row;
  display: block;
  position: relative;
  width: auto;
  height: 100%;
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background-color: green;
}

#column-right {
  flex-direction: row;
  display: block;
  position: relative;
  width: auto;
  height: 100%;
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background-color: green;
}

#column-center {
  flex-direction: row;
  display: flex;
  position: relative;
  height: 100%;
  flex: 1;
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background-color: yellow;
}

#center-content {
  display: flex;
  position: relative;
  height: 100%;
  width: 100%;
  flex-direction: column;
}

#center-content table {
  width: 100%;
  height: 100%;
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border-collapse: collapse;
  border-spacing: 0;
}

#center-content tr {
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

#center-content td {
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

#row-top {
  position: relative;
  width: 100%;
  height: 1%;
  flex-direction: column;
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background-color: blue;
}

#row-center {
  width: 100%;
  height: auto;
  position: relative;
  flex: 1;
  flex-direction: row;
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background-color: white;
}

#row-bottom {
  position: relative;
  width: 100%;
  height: 1%;
  flex-direction: row;
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background-color: magenta;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="body">
  <div id="menuBar">
    <ul>
      <li>Somemenu</li>
    </ul>
  </div>
  <div id="mainWin">
    <div id="content-wrapper">
      <div id="column-left">
        Left
      </div>
      <div id="column-center">
        <div id="center-content">
          <table>
            <tbody>
              <tr>
                <td id="row-top">Top</td>
              </tr>
              <tr>
                <td id="row-center">
                  <button id="fillme">
                Fill me
              </button>
                </td>
              </tr>
              <tr>
                <td id="row-bottom">
                  <div id="cmdCont">
                    <textarea autofocus="" rows="1" style="width:100%;height: 20px;"></textarea>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <div id="column-right">
        Right
      </div>
    </div>
  </div>
</div>