溢出滚动不调整 div 的高度

Question

我的问题：我正在制作 Zillow 的克隆版。我需要页面不扩展到视口高度的 100% 以上，但是，我正在制作一个部分，目的是将溢出属性设置为滚动。当我这样做时，该部分会扩展到视口高度之外，并在我的页面底部留下一个大的空白区域。我可以调整高度以填充到 100vh 但是，如果我垂直调整屏幕，滚动溢出的 div 不会调整到视口高度。感谢您提供的所有帮助！

这是我的问题的屏幕截图：

圆圈部分是我需要溢出滚动的部分：

这是我的 HTML 整个 'popup' 部分：

<div class="home__popup--backdrop">
                        <div class="home__popup--container">
                            <div class="home__popup--left">
                                <div class="home__popup--img--container">
                                    <div class="home__popup--img--main--container">
                                        <img src="./src/img/home-0.jpg" alt="home-0" class="home__popup--img--main">
                                    </div>
                                    <div class="home__popup--img--sub--container">
                                        <img src="./src/img/home-1.jpg" alt="home-0" class="home__popup--img--sub">
                                        <img src="./src/img/home-2.jpg" alt="home-0" class="home__popup--img--sub">
                                        <img src="./src/img/home-3.jpg" alt="home-0" class="home__popup--img--sub">
                                        <img src="./src/img/home-4.jpg" alt="home-0" class="home__popup--img--sub">
                                        <img src="./src/img/home-5.jpg" alt="home-0" class="home__popup--img--sub">
                                        <img src="./src/img/home-0.jpg" alt="home-0" class="home__popup--img--sub">
                                        <img src="./src/img/home-1.jpg" alt="home-0" class="home__popup--img--sub">
                                        <img src="./src/img/home-2.jpg" alt="home-0" class="home__popup--img--sub">
                                    </div>
                                </div> 
                            </div>
                            <div class="home__popup--right">
                                <div class="home__popup--header--container">
                                    <div class="home__popup--logo--container">
                                        <div class="logo__container--home">
                                            <img src="./src/img/logo__house.svg" alt="logo-homes" class="logo logo__homes logo__homes--small">
                                        </div>
                                        <div class="logo__container--txt">
                                            <img src="./src/img/logo__txt.svg" alt="logo-homes" class="logo logo__homes logo__txt--small">
                                        </div>
                                    </div>
                                    <div class="home__popup--social--container">
                                        <div class="home__popup--social">
                                          <img src="./src/img/like.svg" alt="logo like" class="popup__logo logo__like">
                                            <p>Save</p>
                                        </div>
                                        <div class="home__popup--share">
                                            <div class="home__popup--social">
                                                <img src="./src/img/next.svg" alt="logo next" class="popup__logo logo__next">
                                                <p>Share</p>
                                            </div>
                                        </div>
                                        <div class="home__popup--more">
                                            <div class="home__popup--social">
                                                <img src="./src/img/more.svg" alt="logo more" class="popup__logo logo__more">
                                                <p>More</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="home__popup--details--container">
                                    <div class="home__popup--details">
                                        <p class="home__popup--price">0,000</p>
                                        <p class="home__popup--beds home__popup--details--home">3 <span>bds</span></p>
                                        <p class="home__popup--baths home__popup--details--home">2 <span>ba</span></p>
                                        <p class="home__popup--sqft home__popup--details--home">2,245 <span>sqft</span></p>
                                    </div>

                                    <div class="home__popup--address--container">
                                        <p class="home__popup--address">
                                            4210 sharman rd<span>,&nbsp</span>
                                        </p>
                                        <p class="home__popup--city">Madison<span>,&nbsp</span></p>
                                        <p class="home__popup--state">WI</p>
                                    </div>
                                    <div class="home__popup--btn--container">
                                        <button class="btn__agent">Contact Agent</button>
                                    </div>
                                </div>
                                <div class="home__popup--overview--container">
                                    
                                    <div class="home__popup--overview--container--links">
                                        <img src="./src/img/001-left-arrow.svg" alt="arrow-left" class = 'arrow-small arrow-small--left'>
                                        <div class="home__popup--overview home__popup--overview--active home__popup--overview--container--links--text--container" data-list-section = 0>
                                            <p class="home__popup--overview--text home__popup--overview--container--links--text">Overview</p>
                                        </div>
                                        <div class="home__popup--facts home__popup--overview--container--links--text--container">
                                            <p class="home__popup--facts--text home__popup--overview--container--links--text">Facts and features</p>
                                        </div>
                                        <div class="home__popup--value home__popup--overview--container--links--text--container">
                                            <p class="home__popup--value--text home__popup--overview--container--links--text">Home value</p>
                                        </div>
                                        <div class="home__popup--history home__popup--overview--container--links--text--container" data-list-section = 1>
                                            <p class="home__popup--history--text home__popup--overview--container--links--text">Price and tax history</p>
                                        </div>
                                        <div class="home__popup--monthly home__popup--overview--container--links--text--container">
                                            <p class="home__popup--monthly--text home__popup--overview--container--links--text">Monthly cost</p>
                                        </div>
                                        <div class="home__popup--rental home__popup--overview--container--links--text--container">
                                            <p class="home__popup--rental--text home__popup--overview--container--links--text">Rental Value</p>
                                        </div>
                                        <div class="home__popup--schools home__popup--overview--container--links--text--container" data-list-section = 2>
                                            <p class="home__popup--schools--text home__popup--overview--container--links--text">Nearby schools</p>
                                        </div>
                                        <div class="home__popup--similar home__popup--overview--container--links--text--container">
                                            <p class="home__popup--similar--text home__popup--overview--container--links--text">Similar homes</p>
                                        </div>
                                        <div class="home__popup--neighborhood home__popup--overview--container--links--text--container">
                                            <p class="home__popup--neighborhood--text home__popup--overview--container--links--text">Neighborhood</p>
                                        </div>
                                        <div class="home__popup--homes-for-you home__popup--overview--container--links--text--container">
                                            <p class="home__popup--homes-for-you--text home__popup--overview--container--links--text">Homes for you</p>
                                        </div>
                                        <img src="./src/img/002-right-arrow.svg" alt="arrow-right" class = 'arrow-small arrow-small--right'>
                                    </div>
                                   <div class="home__popup--scroll">
                                    <div class="home__popup--home--detail--container">
                                        <div class="home__popup--map--container">
                                            <div class="test" id = "home__popup--map"></div> 
                                        </div>
                                        <div class="home__popup--text--container">
                                            <div class="home__popup--text--stats">
                                                <P class="home__popup--text--header">Overview</P>
                                                <div class="home__popup--text--user-activity">
                                                <p class="home__popup--text--time">Time on Home Finder  &nbsp<span>  --</span></p>
                                                <p class="home__popup--text--views">Views <span>64</span></p>
                                                <p class="home__popup--text--saves">Saves <span>1</span></p>
                                            </div>
                                            <p class="home__popup--text--description">
                                                No showings until 8/22 OH.....
                                            </p>
                                            <p class="home__popup--text--read-more">Read more</p>
                                        </div>      
                                        <p class="home__popup--text--open-house--header">Open House</p>
                                        <p class="home__popup--text--open-house--day">Sun, Aug 22</p>
                                        <p class="home__popup--text--open-house--time">12:00 PM - 2:00 PM</p>
                                        <ul class="home__popup--text--agent--container">
                                            <li class="home__popup--text--agent">Kavita Biyani</li>
                                            <li class="home__popup--text--agent">Nik Tantardini</li>
                                            <li class="home__popup--text--agent">First Weber INC</li>
                                            <li class="home__popup--text--agent">Lena Oberwetter</li>
                                            <li class="home__popup--text--agent">Prince Michael</li>
                                        </ul>
                                        <div class="home__popup--overview--text">
    
                                        </div>
                                        <div class="home--popup--overview--specs">
    
                                        </div>
                                    </div>
                                   </div>
                                </div>
                                    
                            </div>    
                            </div>
                        </div>
                    </div>

这里是溢出部分的HTML：

 <div class="home__popup--scroll">
                                    <div class="home__popup--home--detail--container">
                                        <div class="home__popup--map--container">
                                            <div class="test" id = "home__popup--map"></div> 
                                        </div>
                                        <div class="home__popup--text--container">
                                            <div class="home__popup--text--stats">
                                                <P class="home__popup--text--header">Overview</P>
                                                <div class="home__popup--text--user-activity">
                                                <p class="home__popup--text--time">Time on Home Finder  &nbsp<span>  --</span></p>
                                                <p class="home__popup--text--views">Views <span>64</span></p>
                                                <p class="home__popup--text--saves">Saves <span>1</span></p>
                                            </div>
                                            <p class="home__popup--text--description">
                                                No showings until 8/22 OH. Amazing opportunity ...
                                            </p>
                                            <p class="home__popup--text--read-more">Read more</p>
                                        </div>      
                                        <p class="home__popup--text--open-house--header">Open House</p>
                                        <p class="home__popup--text--open-house--day">Sun, Aug 22</p>
                                        <p class="home__popup--text--open-house--time">12:00 PM - 2:00 PM</p>
                                        <ul class="home__popup--text--agent--container">
                                            <li class="home__popup--text--agent">Kavita Biyani</li>
                                            <li class="home__popup--text--agent">Nik Tantardini</li>
                                            <li class="home__popup--text--agent">First Weber INC</li>
                                            <li class="home__popup--text--agent">Lena Oberwetter</li>
                                            <li class="home__popup--text--agent">Prince Michael</li>
                                        </ul>
                                        <div class="home__popup--overview--text">
    
                                        </div>
                                        <div class="home--popup--overview--specs">
    
                                        </div>
                                    </div>
                                   </div>

这里是相关的css:

.home__popup {
  &--home--detail--container {
    
  }
  &--text {
    &--description{
      font-size: 1.8rem;
      font-weight: 300;
      color: $color-grey-text;
      line-height: 1.3;
    }
    &--user-activity{
      display: flex;
      margin-bottom: 2rem;
      font-size: 1.4rem;
      color: $color-grey-text;

      & span{
        color: black;
      }
    }

    &--time{
      margin-right: 2rem;
      border-right: 1px solid $color-grey-medium;
      & span{
        font-weight: bold;
        margin-right: 2rem;
      }
    }

    &--saves{
      margin-left: 2rem;
      & span{
        font-weight: bold;
      }
    }

    &--views{
      margin-right: 2rem;
      border-right: 1px solid $color-grey-medium;
      & span{
        font-weight: bold;
        margin-right: 2rem;
      }
    }
    &--header {
      font-size: 2rem;
      font-weight: 700;
      letter-spacing: 0.5px;
      margin-bottom: 2rem;
    }
    &--container {
      margin-top: 2rem;
      display: flex;
      flex-direction: column;
      margin-left: 1rem;
    }
  }
  &--btn {
    &--container {
      margin-top: 1rem;
      margin-left: 1rem;
      display: flex;
      justify-content: space-between;
      width: 100%;
      position: relative;
    }
  }
  &--address {
    &--container {
      display: flex;
      font-weight: 300;
      font-size: 1.6rem;
      margin-left: 1rem;
      margin-top: 1rem;
    }
  }
  &--baths {
    margin-left: 0.5rem;
  }
  &--beds {
    margin-left: 2rem;
  }
  &--price {
    margin-top: 3rem;
    font-size: 2.5rem;
    font-weight: 500;
    margin-left: 1rem;
  }
  &--social {
    cursor: pointer;
    &--container {
      display: flex;
      align-items: center;
      width: 45%;
      justify-content: space-around;
    }
  }
  &--backdrop {
    width: 100vw;
    height: 100vh;
    z-index: 2999;
    position: absolute;
    top: 0;
    left: 0;
    backdrop-filter: blur(2px);
    background-color: rgba(0, 0, 0, 0.671);
  }
  &--container {
    
    position: absolute;
    top: 0;
    left: 50%;
    height: 100vh;
    width: 65vw;
    background-color: white;
    transform: translateX(-50%);
    z-index: 3000;
    backdrop-filter: blur(2px);
    display: flex;
    flex-direction: row;
   
  }

  &--left {
    position: relative;
    width: 60%;
    overflow-y: scroll;
  }

  &--right {
    width: 40%;
    position: relative;
  }

  &--img {
    &--main {
      height: auto;
      object-fit: cover;
      width: 100%;
    }

    &--sub {
      height: 25rem;
      object-fit: cover;
      width: 49.5%;
      margin-bottom: 0.4rem;

      &--container {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
      }
    }
  }

  &--header {
    &--container {
      display: flex;
      justify-content: space-between;
      position: relative;
      border-bottom: 1px solid #6060607a;
      margin-left: 1rem;
      margin-right: 1rem;
    }
  }

  &--logo {
    &--container {
      display: flex;
      transform: translateY(1rem);
    }

    &__homes {
      &--small {
        height: 6rem;
        width: 7rem;
      }
    }
  }

  &--details {
    display: flex;
    align-items: flex-end;

    &--container {
      display: flex;
      flex-direction: column;
      position: relative;
    }

    &--home {
      font-size: 1.6rem;
      font-weight: 400;

      & span {
        border-right: 1px solid $color-grey-text;
        padding-right: 0.5rem;
        font-weight: 300;
      }
    }
  }

  &--sqft {
    margin-left: 0.5rem;
    & span {
      border-right: none;
    }
  }

  &--overview {
    color: $color-primary;
    border-bottom: 2px solid $color-primary;
    &--container {
      display: flex;
      flex-direction: column;
      position: relative;

      &--links {
        display: flex;
        overflow-x: scroll;
        font-size: 14px;
        font-weight: 300;
        height: 5rem;
        align-items: center;
        margin-top: 2rem;
        border-top: 1px solid $color-grey-medium;
        border-bottom: 1px solid $color-grey-medium;
        margin-left: 0.5rem;
        margin-right: 0.5rem;

        &::-webkit-scrollbar {
          display: none;
        }

        &--text {
          margin-left: 1rem;
          margin-right: 1rem;
          width: max-content;

          &--container {
            cursor: pointer;
            height: 100%;
            display: flex;
            align-items: center;
            transition: .2s all;

            &:hover {
              color: $color-primary-light;
            }
          }
        }
      }
    }
  }
}

Answer 1

由于纯粹的顽固不想改变我的css，我遇到了太多问题，但是，我最终放弃了并将该部分重构为网格。我现在能够让它正常运行。这是它的样子：

这里是网格布局的 css：

  &--right {
    width: 40%;
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 5rem 20rem 5rem auto;
  }

这是包含滚动条的更新后 div 的 CSS：

  &--scroll{
    grid-column: 1/-1;
    grid-row: 4/5;
    overflow-y: scroll;
    overflow-x: hidden;
  }

溢出滚动不调整 div 的高度

overflow scroll not adjusting height of div

html

css

height

scroll

overflow