Why is my HTML page not scrollable even though I have tried overflow-y: scrollable;

Pav
February 18, 2023
192 views
0 votes
2 Answers

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.

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?

Tags: css html

Answers

- BenM
- February 18, 2023 at 9:44 pm
- 0 votes
0
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.

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>

Please signup or login to give your own answer.

Click here to cancel reply.