如何在没有固定高度的情况下使动态div溢出

Posted 2023-03-05

【中文标题】如何在没有固定高度的情况下使动态div溢出

【英文标题】：How to make dynamic div overflow without fixed height

【发布时间】：2019-04-27 14:27:55

【问题描述】：

我正在尝试创建一个没有固定高度父级的滚动元素。我希望我的代码中的#SECTION1 可以滚动以显示其余图像。我似乎找不到办法做到这一点。我试图将#SECTION1 设置为固定高度，但它会迫使我的图像被压扁。任何帮助，将不胜感激。谢谢你。

这是我的代码：

* 
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  text-decoration: none;


 ::-webkit-scrollbar 
  width: 15px;



/* Track */

::-webkit-scrollbar-track 
  background: #f1f1f1;



/* Handle */

::-webkit-scrollbar-thumb 
  background: #888;



/* Handle on hover */

::-webkit-scrollbar-thumb:hover 
  background: #555;


html,
body 
  margin: 0;
  padding: 0;
  height: 100vh;
  overflow: hidden;



/*----------SECTION 1----------*/

header 
  height: 80px;
  background-color: black;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;


#header-wrapper 
  display: flex;
  width: 55%;
  justify-content: space-between;
  align-items: center;


#logo 
  width: 70px;


nav a 
  color: white;
  padding: 20px;
  font-family: 'Roboto';
  font-size: 0.8em;
  font-weight: bold;


@media only screen and (max-width: 750px) 
  nav 
    display: none;
  


#mobile-menu 
  color: white;
  font-size: 1.3em;


@media only screen and (min-width: 750px) 
  #mobile-menu 
    display: none;
  


#body-wrapper 
  display: flex;
  height: 100%;


aside 
  width: 300px;
  height: 889px;
  background-color: #0c0c0c;
  display: flex;
  align-items: center;
  padding-top: 50px;
  flex-direction: column;


#aside-wrap 
  width: 70%;


#user-info 
  display: flex;
  margin: 10px;
  margin-left: 0;
  margin-bottom: 50px;
  justify-content: center;
  align-items: center;
  font-family: 'Roboto';
  font-weight: 400;


#user 
  font-size: 40px;
  color: white;
  margin-right: 20px;


aside h3 
  color: white;
  font-size: 1.2em;


#hello 
  color: white;
  font-size: 20px;


#box-1 
  color: #808080;
  margin-bottom: 60px;


#box-1 p 
  margin: 20px;
  margin-left: 0;
  font-family: 'Roboto';
  font-size: 0.9em;


#box-2 
  color: #808080;


#box-2 p 
  margin: 20px;
  margin-left: 0;
  font-family: 'Roboto';
  font-size: 0.9em;


#section1 
  background-color: #191919;
  /*background: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3)), 
url("listen_background.jpg");*/
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 100%;
  overflow: auto;


#section1-wrapper 
  width: 80%;
  display: flex;
  font-family: 'Roboto';
  padding-top: 50px;
  padding-bottom: 50px;
  align-items: center;
  flex-direction: column;


#section1 h1 
  color: white;
  font-size: 3em;
  margin-bottom: 50px;
  text-align: center;


.image-box 
  max-width: 280px;
  margin: 20px;


img 
  max-width: 100%;


#image-row-1,
#image-row-2,
#image-row-3,
#image-row-4 
  width: 100%;
  margin-bottom: 50px;
  display: flex;
  justify-content: space-between;


@media only screen and (max-width: 1080px) 
  #image-row-1,
  #image-row-2,
  #image-row-3,
  #image-row-4 
    flex-direction: column;
    align-items: center;
  



/*----------------SECTION 2--------------*/

#pusher 
  height: 889px;
  width: 300px;


#player 
  height: 80px;
  width: 100%;
  position: fixed;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: black;


@media only screen and (max-width: 750px) 
  #player 
    height: auto;
  


#player-wrapper 
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 80%;


@media only screen and (max-width: 750px) 
  #player-wrapper 
    flex-direction: column;
  


.button-controls 
  color: white;
  margin: 20px;


#player-bar 
  width: 100%;
  height: 3px;
  background-color: white;


#player-filler 
  width: 50%;
  height: 100%;
  background-color: #2A4B5A;


#timeline 
  width: 50%;
  display: flex;
  justify-content: center;
  align-items: center;


@media only screen and (max-width: 750px) 
  #timeline 
    width: 100%;
  


#timeline p 
  color: white;
  margin: 20px;


#share,
#phone 
  color: white;
  margin: 20px;


@media only screen and (max-width: 750px) 
  #share,
  #phone 
    display: none;
  

<head>
  <meta charset="utf-8">
  <title>Flo Music</title>
  <link rel="stylesheet" type="text/css" href="listen.css">
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
</head>

<body>
  <div id="test">
    <div id="body-wrapper">
      <aside>
        <div id="aside-wrap">
          <div id="user-info">
            <i class="far fa-user-circle" id="user"></i>
            <h3>Emmanuel</h3>
          </div>

          <div id="box-1">
            <p>Your Library</p>
            <p>Recently Played</p>
            <p>Songs</p>
            <p>Playlist</p>
          </div>

          <div id="box-2">
            <p>Your Library</p>
            <p>Recently Played</p>
            <p>Songs</p>
            <p>Playlist</p>
          </div>

          <p>HOME</p>
        </div>
      </aside>

      <section id="section1">
        <div id="section1-wrapper">
          <h1>New Releases</h1>
          <div id="image-row-1">
            <div class="image-box"><img src="album1.jpg"></div>
            <div class="image-box"><img src="album2.jpg"></div>
            <div class="image-box"><img src="album3.jpg"></div>
            <div class="image-box"><img src="album4.jpg"></div>
          </div>
          <div id="image-row-2">
            <div class="image-box"><img src="album5.jpg"></div>
            <div class="image-box"><img src="album6.jpg"></div>
            <div class="image-box"><img src="album7.jpg"></div>
            <div class="image-box"><img src="album8.png"></div>
          </div>

          <div id="image-row-3">
            <div class="image-box"><img src="album9.jpg"></div>
            <div class="image-box"><img src="album10.jpg"></div>
            <div class="image-box"><img src="album11.jpg"></div>
            <div class="image-box"><img src="album12.jpg"></div>
          </div>

          <div id="image-row-4">
            <div class="image-box"><img src="album13.jpg"></div>
            <div class="image-box"><img src="album14.jpg"></div>
            <div class="image-box"><img src="album15.jpg"></div>
            <div class="image-box"><img src="album16.jpg"></div>
          </div>
        </div>
      </section>
    </div>

    <div id="player">
      <div id="player-wrapper">
        <div id="controls">
          <i class="fas fa-backward button-controls"></i>
          <i class="fas fa-play button-controls"></i>
          <i class="fas fa-forward button-controls"></i>
        </div>

        <div id="timeline">
          <p>0:00</p>
          <div id="player-bar">
            <div id="player-filler"></div>
          </div>
          <p>0:00</p>
        </div>

        <div id="icon-right">
          <i class="fas fa-share-square" id="share"></i>
          <i class="fas fa-mobile" id="phone"></i>
        </div>

【参考方案1】：

弹性项目默认设置为flex-shrink: 1。这意味着它们可以收缩以防止容器溢出。在您的情况下，您可能需要禁用此功能 (flex-shrink: 0)。

---

另外，考虑在弹性容器上使用height: 100vh，而不是height: 100%。百分比高度很棘手，通常需要父级具有定义的高度。

详情见此贴：Working with the CSS height property and percentage values

---

最后，从弹性容器中删除 justify-content: center。在某些情况下，它会使内容无法通过滚动访问。

详情见此贴：Can't scroll to top of flex item that is overflowing container

---

对您的代码进行以下调整：

#body-wrapper 
  display: flex;
  /* height: 100%; */
  height: calc(100vh - 80px); /* subtract footer height */


#section1 
  background-color: #191919;
  display: flex;
  align-items: center;
  /* justify-content: center; */ /* remove to avoid scrolling problems */
  flex-direction: column;
  width: 100%;
  overflow: auto;


#section1-wrapper 
  width: 80%;
  display: flex;
  font-family: 'Roboto';
  padding-top: 50px;
  padding-bottom: 50px;
  align-items: center;
  flex-direction: column;
  flex-shrink: 0; /* add to disable flex default shrinking feature */

jsFiddle demo

【参考方案2】：

您应该在#section1 中更改您的溢出属性

#section1-wrapper 
overflow: scroll;

【讨论】：

这仍然不起作用。确实会出现一个滚动条，但我无法实际使用它来滚动。