1

My issue: I'm making somewhat of a Zillow clone. I need the page to not expand beyond 100% of the viewport height however, I'm making a section with the intentions of having the overflow property set to scroll. When I do this, the section expands beyond the viewport height and leaves a large whitespace at the bottom of my page. I can adjust the height to fill up to 100vh however, if I adjust the screen vertically the div with the scroll overflow doesn't adjust to the viewport height. Thanks for any and all help!

Here's a screenshot of my issue: enter image description here

The circled section is the section that I need the overflow to scroll: enter image description here

This is my HTML for the entire 'popup' portion:

<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">$500,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>

Here's the HTML for the overflowed portion:

 <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>

Here is the relevant 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;
            }
          }
        }
      }
    }
  }
}
Improve this question
6
  • set overflow-y: auto; and instead oh height: 100vh do min-height: 100vh. Commented Sep 4, 2021 at 16:43
  • Thanks for the reply. I'm still running into the same issues. When I set the min-height, the white space just expands. When I set the max-height, I end up having the same results as I do when I just set the height Commented Sep 4, 2021 at 19:06
  • did you hosted your website somewhere? Commented Sep 4, 2021 at 19:16
  • no, I'm just running it on a local server Commented Sep 4, 2021 at 19:18
  • 1
    thanks for the help. I ended up just using a grid for alignment and got it to work. Commented Sep 5, 2021 at 20:43

1 Answer 1

Reset to default
2

I was having way too many issues out of pure stubbornness of not wanting to change my css however, I finally gave in and refactored the section as a grid. I'm now able to get it to function properly. Here's what it looks like:

enter image description here

And here's the css for the grid-layout:

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

here's the CSS for the updated div containing the scroll bar:

  &--scroll{
    grid-column: 1/-1;
    grid-row: 4/5;
    overflow-y: scroll;
    overflow-x: hidden;
  }
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.