文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >如何将深度嵌套列表缩小到留在窗口中空间，这样页面不会滚动，但列表会缩小并可以滚动

问如何将深度嵌套列表缩小到留在窗口中空间，这样页面不会滚动，但列表会缩小并可以滚动
EN

Stack Overflow用户
提问于 2020-08-31 03:04:58
回答 1查看 79关注 0票数 0

以下是解决方案。

CSS：

代码语言：javascript
复制
html {
  height: 100vh;
  width: 100vw;
}

body {
  height: 100%;
  width: 100%;
  position: relative;
  overflow: hidden;
}

.playlist-page {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  position: absolute;
}

.playlist-header {
  flex-shrink: 0;
}

.playlist-fill {
  flex-shrink: 1;
  min-height: 0;
  max-height: 100%;
}

.playlist-container {
  height: 100%;
}

.playlist-row {
  height: 100%;
}

.playlist-pane {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.playlist-pane-header {
  flex-shrink: 0;
}

.playlist-list {
  flex-shrink: 1;
  min-height: 0;
  max-height: 100%;
  overflow: auto;
  border-style: solid;
  border-color: blue;
}

备注：

100vh，100vw表示视区高度和宽度的100%。

高度: 100%；在子元素中总是相对于直接父元素，如果直接父元素没有指定的高度，100%将不做任何事情。这就是为什么我必须在.playlist-container和.playlist-row中指定height: 100%；的原因。

body的位置是相对的；而.playlist-page的位置是绝对的；因为在React中，.playlist-page不会是body的直接子对象，我们不能为所有中间的父对象设置height: 100%；。

flexshrink: 1；需要min-height: 0；max-height: 100%；强制元素缩小到小于其内容。

HTML：

代码语言：javascript
复制
<html>
  <head>
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
    />
    <link rel="stylesheet" href="shrinklist.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <title>Testi ng!</title>
  </head>
  <body>
    <div class="playlist-page">
      <div class="playlist-header">
        <button class="btn" color="primary">Import</button>
      </div>
      <p />
      <div class="playlist-fill">
        <div class="container-fluid playlist-container">
          <div class="row playlist-row">
            <div class="col-6 col-sm-6 col-md-6 col-lg-6 playlist-pane">
              <div class="playlist-pane-header">
                <button class="btn">Playlist:</button>
                <p />
              </div>
              <div class="list-group playlist-list">
                <div class="list-group-item playlist-item">
                  <p>image &ensp; title</p>
                </div>
                <div class="list-group-item playlist-item">
                  <p>image &ensp; title</p>
                </div>
                <div class="list-group-item playlist-item">
                  <p>image &ensp; title</p>
                </div>
                <div class="list-group-item playlist-item">
                  <p>image &ensp; title</p>
                </div>
                <div class="list-group-item playlist-item">
                  <p>image &ensp; title</p>
                </div>
                <div class="list-group-item playlist-item">
                  <p>image &ensp; title</p>
                </div>
                <div class="list-group-item playlist-item">
                  <p>image &ensp; title</p>
                </div>
                <div class="list-group-item playlist-item">
                  <p>image &ensp; title</p>
                </div>
                <div class="list-group-item playlist-item">
                  <p>image &ensp; title</p>
                </div>
                <div class="list-group-item playlist-item">
                  <p>image &ensp; title</p>
                </div>
                <div class="list-group-item playlist-item">
                  <p>image &ensp; title</p>
                </div>
                <div class="list-group-item playlist-item">
                  <p>image &ensp; title</p>
                </div>
                <div class="list-group-item playlist-item">
                  <p>image &ensp; title</p>
                </div>
                <div class="list-group-item playlist-item">
                  <p>image &ensp; title</p>
                </div>
                <div class="list-group-item playlist-item">
                  <p>image &ensp; title</p>
                </div>
                <div class="list-group-item playlist-item">
                  <p>image &ensp; title</p>
                </div>
                <div class="list-group-item playlist-item">
                  <p>image &ensp; title</p>
                </div>
                <div class="list-group-item playlist-item">
                  <p>image &ensp; title</p>
                </div>
                <div class="list-group-item playlist-item">
                  <p>image &ensp; title</p>
                </div>
                <div class="list-group-item playlist-item">
                  <p>image &ensp; title</p>
                </div>
              </div>
            </div>
            <div class="col-6 col-sm-6 col-md-6 col-lg-6 playlist-pane">
              <div class="playlist-pane-header">
                <button class="btn">Playlist:</button>
                <p />
              </div>
              <div class="list-group playlist-list">
                <div class="list-group-item playlist-item">
                  <p>image &ensp; title</p>
                </div>
                <div class="list-group-item playlist-item">
                  <p>image &ensp; title</p>
                </div>
                <div class="list-group-item playlist-item">
                  <p>image &ensp; title</p>
                </div>
                <div class="list-group-item playlist-item">
                  <p>image &ensp; title</p>
                </div>
                <div class="list-group-item playlist-item">
                  <p>image &ensp; title</p>
                </div>
                <div class="list-group-item playlist-item">
                  <p>image &ensp; title</p>
                </div>
                <div class="list-group-item playlist-item">
                  <p>image &ensp; title</p>
                </div>
                <div class="list-group-item playlist-item">
                  <p>image &ensp; title</p>
                </div>
                <div class="list-group-item playlist-item">
                  <p>image &ensp; title</p>
                </div>
                <div class="list-group-item playlist-item">
                  <p>image &ensp; title</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

可执行文件：

https://codesandbox.io/s/long-leftpad-ltx97

在新窗口中打开预览并垂直调整其大小。当列表框的内容比页面高时，将出现滚动条。

html
css
reactjs
twitter-bootstrap
flexbox
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-09-03 06:13:13

这就是解决方案，我必须输入至少30个字符。

https://codesandbox.io/s/long-leftpad-ltx97

票数 -1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/63661140

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档