Question

我尝试使用两列布局，但我需要两列都伸展到底部。布局如下：

[--- --- HEADER

[ROW1] [行2]

等等......（进入页面底部）

我在互联网上搜索过，但我找不到任何对我有用的东西。

它必须是2列，一个是固定大小的，另一个是填充屏幕的其余部分（水平），两者都必须是不同的颜色，两者都必须伸展到底部。如果我把内容放在其中，它们就不应该溢出来。

我的代码是：

＆＃13;

html, body {
  padding: 0;
  margin: 0;
  height: 100%;
}

.hb {
  background-color: #3a3a3a;
  width: 100%;
}

.hb-header {
  font-family: 'Roboto Slab', serif;
  color: #fff;
  margin: 0;
}

.roboto-slab {
  font-family: 'Roboto Slab', serif;
}

.navbutton {
  color: #fff;
  text-decoration: none;
  display: inline-block;
  text-align: center;
  padding: 2px;
  float: left;
}

.navbutton:link, .navbutton:visited {
  background-color: #00bc00;
}

.navbutton:active {
  background-color: #007200;
}

.chat-content {
  position: relative;
  width: 100%;
}

.server-list {
  background-color: #b2b2b2;
  color: #fff;
  float: left;
  width: 300px;
  height: 50%;
}

.server-chat {
  background-color: #999;
  color: #fff;
  overflow: hidden;
  height: 50%;
}

＆＃13;

<div class="hb">
  <h2 class="hb-header">Header</h2>
</div>
<div class="chat-content">
  <div class="server-list" id="serverlist">
    <h1>Display Text</h1>
  </div>
  <div class="server-chat" id="serverchat">
    <h1>Display Text</h1>
  </div>
</div>

＆＃13;

Answer 1

使用CSS网格，您可以很容易地完成您所描述的布局。

＆＃13;

body {
  display: grid;
  grid-template-columns: 200px 1fr; /* left column is fixed, right fills remaining */
  grid-column-gap: 1rem; /* small gap between the columns */
}

header {
  grid-column: span 2; /* header should be full width */
  text-align: center;
  background-color: #eee;
}

section.left {
  background-color: #ddd;
}

＆＃13;

<body>
  <header>header</header>
  <section class='left'>
    left column
  </section>
  <section>
    right column
    <br><br><br><br><br>
    left column is same height as this
  </section>
</body>

＆＃13;

你的问题不是100％清楚;如果你想拥有行（以便交替使用内容LRLRLR），你可以使用带有固定宽度的奇数项目的flexbox，甚至是flex: 1项。

Answer 2

您可以轻松地使用Flex进行此布局：

＆＃13;

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  height: 100vh; /* this will make body take full height screen */
  display: flex;
  flex-direction: column;
}

header {
  border: 1px solid;
  padding: 10px;
}

.container {
  flex: 1; /* this will make content to stretch to bottom */
  display: flex;
}

.col1 {
  width: 200px;
  border: 1px solid green;
}

.col2 {
  flex: 1; /* this will make content to take remaining space horizontally */
  border: 1px solid red;
}

＆＃13;

<header> header</header>
<div class="container">
  <div class="col1">
    this column has a fixed width of 200px; and will stretch to the bottom
  </div>
  <div class="col2">
    this column will take the remaining width and will also stretch to the bottom
  </div>
</div>

＆＃13;

我不知道如何创建双列布局

2 个答案: