skip to Main Content

I am trying to make a test website with 2 halves – one half that is white and the other half that is black.
But I have encountered an issue that I can’t scroll down on the page

It might have something to do with the page being split in 2 halves but I’m not quite sure.

Image of HTML page

Here is the CSS code:

body {
    font-family: 'Roboto', sans-serif;
    overflow: hidden;
}

.split {
    height: 100%;
    width: 50%;
    position: fixed;
    z-index: 1;
    top: 0;
    padding-top: 20px;
}

.left {
    margin-left: 30px;
    background-color: white;
}

.left p {
    font-size: 100px;
    font-family: 'Roboto', sans-serif;
    margin-top: 50px;
    color: 151515;
    font-weight: 500;
    transition: all .45s ease;
}

@media screen and (max-width: 1480px) {
    .left p {
        font-size: 100px;
    }
}


@media screen and (max-width: 1100px) {
    .left p {
        font-size: 80px;
    }
}

@media screen and (max-width: 920px) {
    .left p {
        font-size: 60px;
    }
}


@media screen and (max-width: 840px) {
    .left p {
        font-size: 40px;
    }
}

.right {
    right: 0;
    background-color: #151515;
    border-image: url(/assets/images/Frame 13.png) 30 round;
    border-left: 5px solid transparent;
}

.logo img {
    width: 250px;
}

.topnav {
    overflow: hidden;
    text-align: center;
    z-index: 6;
}

.topnav a {
    display: inline-block;
    margin-right: -4px;
    padding: 22px 22px;
    text-decoration: none;
    font-size: 18px;
    z-index: 9;
    transition: 300ms;
    letter-spacing: 1px;
    font-family: 'Roboto', sans-serif;
    font-size: 18px;
    font-weight: 300;
}

.topnav a:hover {
    color: var(--link-color);
}

I tried adding

html,
body {
    overflow: scroll;
    position: absolute;
}

Here is a code snippet:

let colors = ["#47A3FF", "#77DD77", "#F9E47D", "#FF564D"], idx = 0;
document.getElementById("centered_nav").addEventListener("mouseenter", function (e) {
    this.style.setProperty('--link-color', colors[(idx = idx + 1) % colors.length]);
});
body {
    font-family: 'Roboto', sans-serif;
}

.split {
    height: 100%;
    width: 50%;
    position: fixed;
    z-index: 1;
    top: 0;
    padding-top: 20px;
}

.left {
    margin-left: 30px;
    background-color: white;
}

.left h1 {
    font-size: 100px;
    font-family: 'Roboto', sans-serif;
    margin-top: 50px;
    color: 151515;
    font-weight: 500;
    transition: all .45s ease;
}

.left p {
    font-size: 10px;
    font-family: 'Roboto', sans-serif;
    margin-top: 50px;
    font-weight: lighter;
    color: 151515;
    font-weight: 500;
    transition: all .45s ease;
    color: #6C6C6C;
}


@media screen and (max-width: 1480px) {
    .left h1 {
        font-size: 100px;
    }
}


@media screen and (max-width: 1100px) {
    .left h1 {
        font-size: 80px;
    }
}

@media screen and (max-width: 920px) {
    .left h1 {
        font-size: 60px;
    }
}


@media screen and (max-width: 840px) {
    .left h1 {
        font-size: 40px;
    }
}

.right {
    right: 0;
    background-color: #151515;
    border-image: url(/assets/images/Frame 13.png) 30 round;
    border-left: 5px solid transparent;
}

.logo img {
    width: 250px;
}

.topnav {
    overflow: hidden;
    text-align: center;
    z-index: 6;
}

.topnav a {
    display: inline-block;
    margin-right: -4px;
    padding: 22px 22px;
    text-decoration: none;
    font-size: 18px;
    z-index: 9;
    transition: 300ms;
    letter-spacing: 1px;
    font-family: 'Roboto', sans-serif;
    font-size: 18px;
    font-weight: 300;
    color: white;
    transition: all .45 ease;
    position: relative;
}

.topnav a:after {
    background: none repeat scroll 0 0 transparent;
    bottom: 15px;
    content: "";
    display: block;
    height: 1px;
    left: 0%;
    position: absolute;
    background-color: var(--link-color);
    transition: width 0.3s ease 0s, left 0.3s ease 0s;
    width: 0;
}

.topnav a:hover:after {
    content: "";
    background-color: var(--link-color);
    position: absolute;
    left: 0;
    bottom: 15px;
    height: 1px;
    width: 100%;
}



.box1_1 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 262px;
    height: 276px;
    background: gray;
    opacity: 1;
    border-radius: 44px;
    box-shadow: -10.746728897094727px 9.851167678833008px 60px rgba(0, 0, 0, 0.09000000357627869);
    overflow: hidden;
    position: relative;
}

.box1_3 {
    padding-top: 20%;
    font-size: 25px;
    font-weight: bold;
    text-align: center;
    background: white;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 10;
}

.box1_2 {
    font-size: 25px;
    font-weight: bold;
    text-align: center;
    background: #f6df6f;
    height: 35%;
    width: 100%;
    position: absolute;
    bottom: 0%;
    box-shadow: -10.746728897094727px 9.851167678833008px 60px rgba(0, 0, 0, 0.09000000357627869);
    /* Add the same box-shadow as the parent container */
}

.box1_3 h1 {
    font-size: 72px;
    margin-top: -10px;
}

.box1_2 p {
    font-size: 18px;
}

.cards-container {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 50px;
    margin-top: 50px;
}

.right-cards-container {
    display: inline-block;
    flex-direction: row;
    gap: 50px;
    align-items: flex-end;
    align-self: flex-end;
}

.right-cards-container .box1_1 {
    width: 205px;
    height: 215px;
}
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
       
        <div class="split left">
            <div class="logo">
                <a href="index.html">
                    <img src="/assets/images/Logo.png" alt="logo">
                </a>
            </div>
            <h1>How the<br>points are<br>currently<br>looking</h1>
            <p>© 2023 Bharveer Singh · Sehaj Grewal</p>
          </div>

                <div class="split right">
                    <div class="topnav" id="centered_nav">
                        <a href="houseHistoryStanway.html" title="Home">House History</a>
                        <a href="#services" title="Dashboard">Dashboard</a>
                    </div>
                    <div class="cards-container">
                        <div class="box1_1">
                          <div class="box1_3">
                              <p>CAREY</p>
                          <h1>1</h1>
                        </div>
                        <div class="box1_2">
                          <p>On 56 Points</p>
                        </div>
                      </div>
                      <div class="box1_1">
                        <div class="box1_3">
                            <p>CAREY</p>
                        <h1>1</h1>
                      </div>
                      <div class="box1_2">
                        <p>On 56 Points</p>
                      </div>
                      </div>
                      <div class="right-cards-container">
                        <div class="box1_1">
                          <div class="box1_3">
                              <p>CAREY</p>
                          <h1>1</h1>
                        </div>
                        <div class="box1_2">
                          <p>On 56 Points</p>
                        </div>
                        </div>
                        <div class="box1_1">
                          <div class="box1_3">
                              <p>CAREY</p>
                          <h1>1</h1>
                        </div>
                        <div class="box1_2">
                          <p>On 56 Points</p>
                        </div>
                        </div>
                      </div>
                      </div>
                </div>

        <script src="script.js" async defer></script>
    </body>
</html>

But that does not seem to do anything
Could someone please help me?

2

Answers


  1. You’re using position: fixed on the .split element. fixed elements don’t behave like static block-level elements, so they don’t contribute towards an element’s scrollable height.

    You should probably look into the use of position: sticky if you’re looking for a more flexible fixed positioned element.

    Login or Signup to reply.
  2. Try using the flex property:

    let colors = ["#47A3FF", "#77DD77", "#F9E47D", "#FF564D"], idx = 0;
    document.getElementById("centered_nav").addEventListener("mouseenter", function (e) {
        this.style.setProperty('--link-color', colors[(idx = idx + 1) % colors.length]);
    });
    body {
        font-family: 'Roboto', sans-serif;
        display: flex;
        margin: 0;
    }
    
    .split {
        width: 50%;
        padding-top: 20px;
    }
    
    .left {
        margin-left: 30px;
        background-color: white;
    }
    
    .left h1 {
        font-size: 100px;
        font-family: 'Roboto', sans-serif;
        margin-top: 50px;
        color: 151515;
        font-weight: 500;
        transition: all .45s ease;
    }
    
    .left p {
        font-size: 10px;
        font-family: 'Roboto', sans-serif;
        margin-top: 50px;
        font-weight: lighter;
        color: 151515;
        font-weight: 500;
        transition: all .45s ease;
        color: #6C6C6C;
    }
    
    
    @media screen and (max-width: 1480px) {
        .left h1 {
            font-size: 100px;
        }
    }
    
    
    @media screen and (max-width: 1100px) {
        .left h1 {
            font-size: 80px;
        }
    }
    
    @media screen and (max-width: 920px) {
        .left h1 {
            font-size: 60px;
        }
    }
    
    
    @media screen and (max-width: 840px) {
        .left h1 {
            font-size: 40px;
        }
    }
    
    .right {
        right: 0;
        background-color: #151515;
        border-image: url(/assets/images/Frame 13.png) 30 round;
        border-left: 5px solid transparent;
    }
    
    .logo img {
        width: 250px;
    }
    
    .topnav {
        overflow: hidden;
        text-align: center;
        z-index: 6;
    }
    
    .topnav a {
        display: inline-block;
        margin-right: -4px;
        padding: 22px 22px;
        text-decoration: none;
        font-size: 18px;
        z-index: 9;
        transition: 300ms;
        letter-spacing: 1px;
        font-family: 'Roboto', sans-serif;
        font-size: 18px;
        font-weight: 300;
        color: white;
        transition: all .45 ease;
        position: relative;
    }
    
    .topnav a:after {
        background: none repeat scroll 0 0 transparent;
        bottom: 15px;
        content: "";
        display: block;
        height: 1px;
        left: 0%;
        position: absolute;
        background-color: var(--link-color);
        transition: width 0.3s ease 0s, left 0.3s ease 0s;
        width: 0;
    }
    
    .topnav a:hover:after {
        content: "";
        background-color: var(--link-color);
        position: absolute;
        left: 0;
        bottom: 15px;
        height: 1px;
        width: 100%;
    }
    
    
    
    .box1_1 {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 262px;
        height: 276px;
        background: gray;
        opacity: 1;
        border-radius: 44px;
        box-shadow: -10.746728897094727px 9.851167678833008px 60px rgba(0, 0, 0, 0.09000000357627869);
        overflow: hidden;
        position: relative;
    }
    
    .box1_3 {
        padding-top: 20%;
        font-size: 25px;
        font-weight: bold;
        text-align: center;
        background: white;
        height: 100%;
        width: 100%;
        position: absolute;
        top: 10;
    }
    
    .box1_2 {
        font-size: 25px;
        font-weight: bold;
        text-align: center;
        background: #f6df6f;
        height: 35%;
        width: 100%;
        position: absolute;
        bottom: 0%;
        box-shadow: -10.746728897094727px 9.851167678833008px 60px rgba(0, 0, 0, 0.09000000357627869);
        /* Add the same box-shadow as the parent container */
    }
    
    .box1_3 h1 {
        font-size: 72px;
        margin-top: -10px;
    }
    
    .box1_2 p {
        font-size: 18px;
    }
    
    .cards-container {
        display: flex;
        align-items: center;
        flex-direction: column;
        gap: 50px;
        margin-top: 50px;
    }
    
    .right-cards-container {
        display: inline-block;
        flex-direction: row;
        gap: 50px;
        align-items: flex-end;
        align-self: flex-end;
    }
    
    .right-cards-container .box1_1 {
        width: 205px;
        height: 215px;
    }
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <title></title>
            <meta name="description" content="">
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
            <link rel="stylesheet" href="style.css">
        </head>
        <body>
           
            <div class="split left">
                <div class="logo">
                    <a href="index.html">
                        <img src="/assets/images/Logo.png" alt="logo">
                    </a>
                </div>
                <h1>How the<br>points are<br>currently<br>looking</h1>
                <p>© 2023 Bharveer Singh · Sehaj Grewal</p>
              </div>
    
                    <div class="split right">
                        <div class="topnav" id="centered_nav">
                            <a href="houseHistoryStanway.html" title="Home">House History</a>
                            <a href="#services" title="Dashboard">Dashboard</a>
                        </div>
                        <div class="cards-container">
                            <div class="box1_1">
                              <div class="box1_3">
                                  <p>CAREY</p>
                              <h1>1</h1>
                            </div>
                            <div class="box1_2">
                              <p>On 56 Points</p>
                            </div>
                          </div>
                          <div class="box1_1">
                            <div class="box1_3">
                                <p>CAREY</p>
                            <h1>1</h1>
                          </div>
                          <div class="box1_2">
                            <p>On 56 Points</p>
                          </div>
                          </div>
                          <div class="right-cards-container">
                            <div class="box1_1">
                              <div class="box1_3">
                                  <p>CAREY</p>
                              <h1>1</h1>
                            </div>
                            <div class="box1_2">
                              <p>On 56 Points</p>
                            </div>
                            </div>
                            <div class="box1_1">
                              <div class="box1_3">
                                  <p>CAREY</p>
                              <h1>1</h1>
                            </div>
                            <div class="box1_2">
                              <p>On 56 Points</p>
                            </div>
                            </div>
                          </div>
                          </div>
                    </div>
    
            <script src="script.js" async defer></script>
        </body>
    </html>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search