What is preventing the page from scrolling downwards?

Here's a simple question: Why can't I scroll down the page to see the rest of the content in a div that exceeds the length of the window? This has never happened to me before, and I've tried searching for solutions with no luck. I've included all the code below because I'm not sure if it's related to the <meta name ....

<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">

<title>ITW 2021/22 - Driver Details</title>
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<link href="Content/font-awesome.min.css" rel="stylesheet" />
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/ui-darkness/jquery-ui.css">
<link href ="../Content/bootstrap-reboot.min.css" rel="stylesheet" />
<link rel="shortcut icon" href="#">
<style>
    .styles {
        height: 400px;
        width: 500px;
        background-repeat: no-repeat;
        background-size: cover;
    }

    #index {
        background-size: cover;
        background-image: url("https://images5.alphacoders.com/317/thumb-1920-317664.jpg");
        background-position: top;
        position: fixed;
        height: 100%;
        width: 100%;
        z-index: -1;
    }
</style>
</head>
    <body id="index">
    <nav class="navbar navbar-expand-lg navbar-light bg-opacity-10 fixed-top py-3" style="position:relative">
    <div class="container px-4 px-lg-5">
        <a class="navbar-brand" href="index.html">
            <img style="height:50px; width:65px;" src="img/f1-abu-dhabi-gp-2017-f1-logo-6614911-removebg-preview.png" />
        </a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse">
            <ul class="navbar-nav ms-auto my-2 my-lg-0">
                <li class="nav-item"><a class="nav-link" href="home.html" style="color:white"><b>Home</b></a></li>
                <li class="nav-item"><a class="nav-link" href="Circuits.html" style="color: white"><b>Circuits</b></a></li>
                <li class="nav-item"><a class="nav-link" href="Drivers.html" style="color: white"><b>Drivers</b></a></li>
                <li class="nav-item"><a class="nav-link" href="Timeline.html" style="color: white"><b>Champions</b></a></li>
            </ul>
            <div class="dropdown">
                <a style="color: white" class="btn dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
                </a>

                <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="FAQs.html">FAQ's</a></li>
                    <li><a class="dropdown-item" href="AboutUs.html">About us</a></li>

                </ul>
            </div>
        </div>
    </div>
</nav>
<br />


<div class="row" style="margin:auto">
    <div class="container d-flex flex-row" style="margin:auto; min-width:50px; max-width: 600px">
        <div class="py-3 container"><input class="form-control" Id="SearchText" placeholder="Search circuit" /></div>
        <div class="py-3 container"><button type="button" id="clickCir" class="btn btn-secondary">Search</button></div>
    </div>
    <div class="d-none text-danger col-form-label container" id="NomeError">
        <center><i class="fa fa-exclamation-triangle"></i><b>It's necessary to select a circuit</b></center>
    </div>
</div>
<div class="container" style="margin:auto; background-color:white; max-width:900px; min-height:900px; border-radius:10px;">
    <div class="container" id="infoId" style="margin:auto; justify-content:center"> </div>
</div>

<script src="Scripts/bootstrap.min.js"></script>
<script src="../Scripts/knockout-3.5.1.js"></script>
<script src="../Scripts/jquery-3.6.0.min.js"></script>
<script src="Scripts/jquery-ui-1.13.0.js"></script>
<script src="Circuit.js"></script>

Answer №1

To enable scrolling, remove the position: fixed; rule from within your #index { } CSS block.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The ul element does not encompass all child elements in terms of size

I have been working on creating a tabbed navigation component using HTML, and my code looks like this: <ul class="nav"> <li class="selected">Selected Tab</li> <li><a href="#">Not-selected Tab</a></li> ...

Eliminating white space - A CSS and HTML page with no room for gaps

After finally getting my website up and running using style.css, I am faced with the following CSS code: html { height:100%; } { position: relative; z-index: 0; width: 100%; left: 0; top: 0; cursor:default; overflow:visible; } body { ...

floating point for a list item compared to other elements

nav > ul > li { float: left; } #one { float: left; } <nav> <ul> <li> he has a cow </li> <li > he has a dog </li> <li> he has a mouse </li> </ul> & ...

Make the height of the input element equal to 100% of its parent

I am struggling with setting the height of input (type text) to fit 100% of its parent element (td). I attempted to individually adjust the height of each input using jQuery, but this method is time-consuming, especially since the site I am working on ha ...

Applying style changes to the height on scroll event in Javascript for Chrome, Firefox, and Internet Explorer

I am working on triggering an event when scrolling to a specific height. I have code that successfully adds a style in Chrome, but it is not functioning properly in IE. Can anyone provide assistance? myID = document.getElementById("subnav"); var mySc ...

Adjust the alignment of cells within a table

Excuse my lack of knowledge, but CSS is still new to me. I'm attempting to align two elements next to each other using display: table. However, the element on the right seems to be lower than the one on the left, and I can't figure out why. . ...

Positioning of buttons in Bootstrap 5 tables

I am working on a table that represents a CRUD application with details of a person and edit/delete buttons. The goal is to have these buttons displayed side by side, even on smaller screen sizes where they currently stack on top of each other. How can I ...

What is the best way to create a border that surrounds a collection of pictures?

I'm currently facing a challenge in getting a border to perfectly fit around a collection of images. The issue can be observed in this Jsfiddle I shared, where the border aligns with the top and left edges, but not with the bottom and right edges. Her ...

Troubleshooting Autocomplete User Interface Problems

I am currently working on a website user interface and I have encountered an issue specifically in IE7. When searching for a company, the display is not showing up correctly, as demonstrated in the image below. This problem only occurs in IE7, it works fi ...

Encountering a tIDENTIFIER syntax error while trying to include a button_tag in Rails

Currently, I am in the process of developing a rails application and my aim is to incorporate a button that executes a javascript onclick function. The code snippet I am using for this purpose is: <%= button_tag "Action" type: "button", onclick: "test( ...

Tips for deactivating all JavaScript events on a webpage that has been loaded within an iframe

My website is equipped with various JS click/mouseover/mouseout/scroll events and incorporates several JS libraries to operate features such as carousels, bootstrap modal pop-ups, and more. I am looking to halt all events on a specific element. Although I ...

Building applications with Vue.js and Framework7 while incorporating the powerful Axios library

I am inexperienced with framework7 and vuejs. Can someone confirm if I am importing it correctly? Additionally, how can I make axios accessible from other pages? Here is my main.js file. I’m uncertain if the import process is accurate or if any steps ar ...

What is the best way to add a custom class alongside cdk-overlay-pane for a material menu in Angular 7?

I have a specific requirement to create a mega menu using Angular Material Menu. I attempted to apply some custom styling to the cdk-overlay-pane using my own class, but it did not work as expected. I tried to add a custom class to the mat-menu element us ...

Only implement $(document).on(...) for every JQuery request

As someone new to Jquery, I'm facing challenges in grasping its functionality. Specifically, my struggle lies in setting up an event listener on an i element with the class of .dataPickerIcon, which should respond to a click by inserting more HTML usi ...

See-through navigation bar custom-made for materializecss

I've been trying to make my navbar transparent using materializecss, but all my attempts so far have resulted in it turning white. Any suggestions would be greatly appreciated. Thank you! Here is the code I tried: <nav> <div class="nav-w ...

PHP code that generates a drop-down list using a foreach iteration

all I'm encountering a slight issue with trying to create a dynamic drop down list. Here's the code I've written: <select name='categoryID' > <?php foreach( $categories as $category)?> <option value="<?p ...

What are the steps to submit a Textbox form?

My current setup includes a search box and a button that users click to execute the search. However, I am looking to enhance the functionality by allowing users to press "enter" instead of clicking the search button. How can I achieve this modification? B ...

Just beginning my journey with coding and came across this error message: "Encountered Uncaught TypeError: Cannot read property 'value' of null"

As a newcomer to the world of coding, I am excited about working on a side project that allows me to practice what I am learning in my courses. My project so far is a temperature calculator that incorporates basic HTML and JS concepts. My goal is to improv ...

The functionality of the button is currently not compatible with Internet Explorer

I have encountered an issue in my application involving a combination of <h:outputLink> and <p:commandButton> as shown below: <h:outputLink target="_blank" value="theURL"> <p:commandButton value="Click" type="button" /> </h: ...

Failure to load a picture does not trigger onError in the onLoad function

Is there a way to ensure that an image always loads, even if the initial load fails? I have tried using the following code snippet: <img class="small" src="VTVFile4.jpg" onload="this.onload=null; this.src='VTVFile4.jpg?' + new Date();" alt=" ...