Question

我用css测试flexboxes。到现在为止，我认为这很容易，但我有一点问题。

正如您在下面的示例中所看到的，我构建了一个flexbox布局。布局顶部包含一个站点标题，左侧包含一个菜单。内容应显示在中间。我想网站总是适合当前的浏览器。但是如果我的桌子变得很高（例如很多人），我的div“tbl-content”就不再适合页面了。我怎样才能使这个容器可滚动？

html,
body {
  width: 100%;
  height: 100%;
  max-height: 100%;
  padding: 0px;
  margin: 0px;
  min-width: 300px;
  min-height: 200px;
  font-family: sego;
  font-size: 14px;
}

.wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

#header {
  width: 100%;
  flex-shrink: 0;
  height: 55px;
  background-color: #333;
  display: flex;
  flex-direction: row;
}

#site {
  flex-grow: 1;
  display: flex;
  flex-direction: row;
  background-color: #eee;
}

#menu {
  width: 150px;
  background-color: #333;
}

#inhalt {
  flex-grow: 1;
  background-color: #eee;
  margin: 0px;
}

table {
  width: 100%
}

th {
  text-align: left;
}

.tbl-content tr {
  height: 200px;
}

<div class="wrapper">
  <div id="header">Siteheader</div>
  <div id="site">
    <div id="menu">Menu</div>
    <div id="inhalt">
      <div class="tbl-header">
        <table cellpadding="0" cellspacing="0" border="0">
          <thead>
            <tr>
              <th>Header 1</th>
              <th>Header 2</th>
              <th>Header 3</th>
              <th>Header 4</th>
            </tr>
          </thead>
        </table>
      </div>
      <div class="tbl-content">
        <table cellpadding="0" cellspacing="0" border="0">
          <tbody>
            <tr>
              <td>aaa</td>
              <td>bbb</td>
              <td>ccc</td>
              <td>ddd</td>
            </tr>
            <tr>
              <td>aaa</td>
              <td>bbb</td>
              <td>ccc</td>
              <td>ddd</td>
            </tr>
            <tr>
              <td>aaa</td>
              <td>bbb</td>
              <td>ccc</td>
              <td>ddd</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

Answer 1

将此添加到您的代码中：

#inhalt {
  display: flex;
  flex-direction: column;
}

.tbl-content {
  overflow: auto;
}

html,
body {
  width: 100%;
  height: 100%;
  max-height: 100%;
  padding: 0px;
  margin: 0px;
  min-width: 300px;
  min-height: 200px;
  font-family: sego;
  font-size: 14px;
}

.wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

#header {
  width: 100%;
  flex-shrink: 0;
  height: 55px;
  background-color: #333;
  display: flex;
  flex-direction: row;
}

#site {
  flex-grow: 1;
  display: flex;
  flex-direction: row;
  background-color: #eee;
}

#menu {
  width: 150px;
  background-color: #333;
}

#inhalt {
  flex-grow: 1;
  background-color: #eee;
  margin: 0px;
  display: flex;          /* NEW */
  flex-direction: column; /* NEW */
}

.tbl-content {
  overflow: auto;         /* NEW */
}

table {
  width: 100%
}

th {
  text-align: left;
}

.tbl-content tr {
  height: 200px;
}

<div class="wrapper">
  <div id="header">Siteheader</div>
  <div id="site">
    <div id="menu">Menu</div>
    <div id="inhalt">
      <div class="tbl-header">
        <table cellpadding="0" cellspacing="0" border="0">
          <thead>
            <tr>
              <th>Header 1</th>
              <th>Header 2</th>
              <th>Header 3</th>
              <th>Header 4</th>
            </tr>
          </thead>
        </table>
      </div>
      <div class="tbl-content">
        <table cellpadding="0" cellspacing="0" border="0">
          <tbody>
            <tr>
              <td>aaa</td>
              <td>bbb</td>
              <td>ccc</td>
              <td>ddd</td>
            </tr>
            <tr>
              <td>aaa</td>
              <td>bbb</td>
              <td>ccc</td>
              <td>ddd</td>
            </tr>
            <tr>
              <td>aaa</td>
              <td>bbb</td>
              <td>ccc</td>
              <td>ddd</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

Answer 2

如果您使用的是felx-box，那么您不应该使用表格。 div或li简单易读。它还重构您的代码并使您的代码易于理解。

Flexbox，Div溢出页面

2 个答案: