代码之家 › 专栏 › 技术社区 › Edgar Navasardyan

有一个无限滚动的表,占据了页面的剩余空间

semantic-ui css

Edgar Navasardyan · 技术社区 · 4 年前

我有几个关于组织CSS的问题。我正在使用Semantic UI库来增强我的标记,但目前我一直在努力让我的表占据页面的其余部分,在主页上没有滚动,只有表部分是可滚动的。有可能吗?

滚动应从表体开始!

https://jsfiddle.net/nedgar8/azdbnhfq/1/

<body>
  <div class="ui fixed inverted menu">
    <a class="item" href="/">Main</a>
  </div>
  <div class="ui container">
      <table class="ui striped celled selectable table">
        <thead>
          <tr>
            <td>
              My header
            </td>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td class="">My row 1 </td>
          </tr>
          <tr>
            <td class="">My row </td>
          </tr>
          <tr>
            <td class="">My row </td>
          </tr>
          <tr>
            <td class="">My row </td>
          </tr>
          <tr>
            <td class="">My row </td>
          </tr>
          <tr>
            <td class="">My row </td>
          </tr>
          <tr>
            <td class="">My row </td>
          </tr>
          <tr>
            <td class="">My row </td>
          </tr>
          <tr>
            <td class="">My row </td>
          </tr>
          <tr>
            <td class="">My row </td>
          </tr>
          <tr>
            <td class="">My row </td>
          </tr>
          <tr>
            <td class="">My row </td>
          </tr>
          <tr>
            <td class="">My row </td>
          </tr>
        </tbody>
      </table>
      <div> My Footer </div>
  </div>
</body>

0 回复 | 直到 4 年前

mhhabib 4 年前

使用 overflow-x: scroll 在里面 ui-container 我在这里设定了一个高度 300px .之后 300px 它将垂直滚动。

<body>
  <div class="ui fixed inverted menu">
    <a class="item" href="/">Main</a>
  </div>
  <div class="ui-container" style="height:300px;overflow-x: scroll;">
      <table class="ui striped celled selectable table">
       ................
      </table>
  </div>
  <div> My Footer </div>
</body>

我使用了一些CSS ui容器 将页眉和页脚分开。

body {
    padding: 1em;
}
.ui-container{
  margin-top:50px;
  margin-bottom:30px;
}

推荐文章

Jamie · 在CSS链接的文件名中添加Jinja占位符

7 月前

Mass · 如何在Tailwind CSS v4中创建配置

7 月前

magenta placenta · 将css变量合并为一个变量

7 月前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

7 月前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

7 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

8 月前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

8 月前

Ben Halicki · 带有垂直和水平滚动条的表,使用HTML/CSS/Bootstrap-5固定行和列

8 月前

Luckkks · 过渡色工作不正常

8 月前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

8 月前