Question

我有一个。容器 有2列，在第二列 .right 中，我想有2行但第一行 .content 应该使用剩余空间

这是HTML标记

<div class="container">
    <div class="left">left</div>
    <div class="right">
        <div class="content">content</div>
        <div class="footer">footer</div>
    </div>
</div>

这是CSS

.container {
    display: flex;
    flex-direction: row;
    height: 400px; /* the remaining space  in the screen will be nice */
}

.left {
    width: 300px;
}

.right {
    flex-grow: 1;
}

.content {
    align-self: stretch; /* this is not doing anything*/
}

.footer {

}

这就是它的外观

+--------+----------------------+
|        |                      |
|        |                      |
|        |       content        |
|  left  |                      |
|        |                      |
|        +----------------------+
|        |       footer         |
+--------+----------------------+

Answer 1

您可以使用全高Flexbox container：

在right元素的内部嵌套一列flexbox，
在flex-grow: 1上使用content来占用剩余空间。

请参见下面的演示

body {
  margin: 0;
}
.container {
  display: flex;
  /* flex-direction: row; <-- omit this, its default */
  height: 100vh; /* full height */
}

.left {
  width: 300px;
  border: 1px solid;
}

.right {
  flex-grow: 1; /* occupy remaining space */
  display: flex;
  flex-direction: column; /* column flexbox */
  border: 1px solid;
}

.content {
  flex-grow: 1; /* occupy remaining space */
  border-bottom: 1px solid;
}

<div class="container">
  <div class="left">left</div>
  <div class="right">
    <div class="content">content</div>
    <div class="footer">footer</div>
  </div>
</div>

Answer 2

Flexbox在这里工作得很好，但是我想指出，这对于CSS Grid也是一个完美的情况。使用grid可以摆脱多余的容器div.right。

<div class="container">
    <div class="left">left</div>
    <div class="content">content</div>
    <div class="footer">footer</div>
</div>



.container {
    display: grid;
    grid-template-columns: 300px 1fr;
    grid-template-rows: 1fr 100px; /* change the 100px to your desired height of the footer*/
    grid-template-areas: 
      'left content'
      'left footer';
    height: 400px; /* height OP selected */
}

.left {
  grid-area: left;
}

.content {
  grid-area: content;
}

.footer {
 grid-area: footer;
}

一个CodePen只是为了好玩。

Answer 3

Working example jsfiddle

.container {
    display: flex;
    flex-direction: row;
    height: 100VH;
}

.left {
    width: 200px;
    border: 1px solid;
}

.right {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.content {
    border: 1px solid #333;
    border-bottom: 0;
    flex-grow: 1;

}

.footer {
    border: 2px solid;
    height: 100px;
}

具有2列2行的布局

3 个答案: