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

时间：2018-11-25 22:37:59

标签： html css flexbox overflow

我正在尝试创建一个没有固定高度父级的滚动元素。我希望我的代码中的#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>

2 个答案:

答案 0 :(得分：1)

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

此外，请考虑在您的flex容器上使用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

答案 1 :(得分：0)

您应该在＃section1

中更改溢出属性 
#section1-wrapper {
overflow: scroll;
}
相关问题
最新问题