I'm still trying to figure out the property position. Why won't my page scroll? (My first time using HTML)

Question

I'm still trying to figure out the property position. Why won't my page scroll? (My first time using HTML)

I'm having an issue with my webpage where it doesn't scroll even when the content exceeds the page length.

I've tried adjusting the position settings for the body, html, and div elements but haven't seen any changes.

Here is the HTML code snippet:

html {
  position: absolute;
  overflow-y: scroll;
}

body {
  background-color: dimgray !important;
}

body div {
  position: absolute;
}

header {
  position: fixed;
  padding: 10px 0;
  background-color: dimgray;
  border-bottom: 1px solid black;
}

<header class="container-fluid">
  <div class="row">
    <div class="col-sm-4"><img src="/Fedecocagua.png"></div>
    <div class="col-sm-8">
      <ul class="nav">
        <li class="nav-item">
          <a class="nav-link" href="Pruebah2.html" target="_blank" style="color: black">¿Quiénes somos?</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#bottom" style="color: black">Contáctanos</a>
        </li>
      </ul>
    </div>
  </div>
</header>

html css

Answer 1

Answer №1

If you set your html and body to have a position:absolute, it will prevent the page from scrolling. To fix this issue, remove the declaration as shown below:

body {
    background-color: dimgray !important;
}

header {
    position:fixed;
    padding: 10px 0;
    background-color: dimgray;
    border-bottom: 1px solid black;
}

An element with position:absolute is taken out of the document flow, allowing it to be any size and always placed outside the document. Your html and body are special in this regard; there are limited scenarios where positioning them absolutely is necessary. Instead of worrying about their position, focus on creating content within div elements which will naturally scroll when exceeding the page height, like demonstrated here:

div {
    margin-bottom:50px;
}

<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut porta nisi libero, id porta lacus rhoncus id. Pellentesque rutrum molestie maximus. In eu risus id magna tincidunt commodo placerat nec quam. Sed suscipit magna risus, quis rutrum nisl fringilla eget. Ut malesuada consequat quam, non mattis odio viverra blandit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam ultrices nibh et congue sodales. Phasellus sem urna, aliquam id tristique non, lacinia a libero. Vivamus ac elit ligula. Phasellus et nulla viverra, ultrices nibh id, euismod quam. Sed aliquet scelerisque elit, id sodales augue.
</div>
<div>
Maecenas quis luctus odio. Vivamus in libero ligula. Proin viverra consectetur sagittis. Interdum et malesuada fames ac ante ipsum primis in faucibus. In rutrum ligula vitae sodales tincidunt. Etiam semper, libero sed pulvinar rhoncus, justo turpis lobortis elit, vitae dapibus magna massa a dolor. Sed tempor tortor id velit sollicitudin vestibulum. Integer ac felis orci. Etiam metus felis, porta at lectus eu, aliquet pharetra tortor. Curabitur varius tortor vitae tellus suscipit pharetra. Maecenas sit amet tortor ornare, viverra augue vitae, aliquet felis. Integer accumsan dolor ac imperdiet dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque lobortis non quam quis semper.
</div>
<div>
Curabitur ipsum risus, ultricies nec posuere at, finibus quis augue. Mauris ultrices massa quis ipsum tincidunt condimentum. Fusce feugiat id sapien non fermentum. Curabitur vel lectus laoreet velit eleifend tincidunt. Nulla tempus nisi nec lorem efficitur congue. Suspendisse laoreet arcu tempor est tempor pharetra. Sed suscipit vel lorem id elementum. Praesent vitae mauris justo. Vivamus non tellus ligula. Nunc laoreet tincidunt arcu eget maximus.
</div>
<div>
Mauris eu sagittis velit, quis vulputate ex. Vivamus pretium, urna venenatis scelerisque blandit, eros magna placerat ipsum, sit amet accumsan lacus erat non orci. Vestibulum sagittis fringilla mi, vel feugiat ante suscipit in. Sed pellentesque nulla urna, vel interdum augue placerat vitae. Fusce vitae tortor et libero tempus blandit. Donec rutrum venenatis faucibus. Proin luctus rhoncus mauris, nec dictum nisl dapibus eget. Phasellus sollicitudin orci nec augue ultrices, eu vestibulum dolor tincidunt. Integer lobortis eget nibh non ultrices.
</div>
<div>
Cras molestie lectus eget nisi mattis varius. Morbi feugiat in turpis eu fermentum. Nullam et tempus mi, eget ultricies ex. In cursus, lorem id aliquet eleifend, velit ipsum ultricies nisl, sed ultricies nisi arcu ut augue. Nulla pretium ligula et ipsum sodales, vel scelerisque est porttitor. Nulla vitae mi eget quam sodales efficitur at non ex. Fusce imperdiet orci et urna varius rutrum. Donec efficitur tellus non tempor varius. In mattis tortor non metus porttitor fermentum. Etiam dapibus quam augue, et sollicitudin sem feugiat quis. Vestibulum id tortor a elit tempus ultricies semper sit amet nunc. </div>
</div>

Answer 2

If you set your html and body to have a position:absolute, it will prevent the page from scrolling. To fix this issue, remove the declaration as shown below:

body {
    background-color: dimgray !important;
}

header {
    position:fixed;
    padding: 10px 0;
    background-color: dimgray;
    border-bottom: 1px solid black;
}

An element with position:absolute is taken out of the document flow, allowing it to be any size and always placed outside the document. Your html and body are special in this regard; there are limited scenarios where positioning them absolutely is necessary. Instead of worrying about their position, focus on creating content within div elements which will naturally scroll when exceeding the page height, like demonstrated here:

div {
    margin-bottom:50px;
}

<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut porta nisi libero, id porta lacus rhoncus id. Pellentesque rutrum molestie maximus. In eu risus id magna tincidunt commodo placerat nec quam. Sed suscipit magna risus, quis rutrum nisl fringilla eget. Ut malesuada consequat quam, non mattis odio viverra blandit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam ultrices nibh et congue sodales. Phasellus sem urna, aliquam id tristique non, lacinia a libero. Vivamus ac elit ligula. Phasellus et nulla viverra, ultrices nibh id, euismod quam. Sed aliquet scelerisque elit, id sodales augue.
</div>
<div>
Maecenas quis luctus odio. Vivamus in libero ligula. Proin viverra consectetur sagittis. Interdum et malesuada fames ac ante ipsum primis in faucibus. In rutrum ligula vitae sodales tincidunt. Etiam semper, libero sed pulvinar rhoncus, justo turpis lobortis elit, vitae dapibus magna massa a dolor. Sed tempor tortor id velit sollicitudin vestibulum. Integer ac felis orci. Etiam metus felis, porta at lectus eu, aliquet pharetra tortor. Curabitur varius tortor vitae tellus suscipit pharetra. Maecenas sit amet tortor ornare, viverra augue vitae, aliquet felis. Integer accumsan dolor ac imperdiet dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque lobortis non quam quis semper.
</div>
<div>
Curabitur ipsum risus, ultricies nec posuere at, finibus quis augue. Mauris ultrices massa quis ipsum tincidunt condimentum. Fusce feugiat id sapien non fermentum. Curabitur vel lectus laoreet velit eleifend tincidunt. Nulla tempus nisi nec lorem efficitur congue. Suspendisse laoreet arcu tempor est tempor pharetra. Sed suscipit vel lorem id elementum. Praesent vitae mauris justo. Vivamus non tellus ligula. Nunc laoreet tincidunt arcu eget maximus.
</div>
<div>
Mauris eu sagittis velit, quis vulputate ex. Vivamus pretium, urna venenatis scelerisque blandit, eros magna placerat ipsum, sit amet accumsan lacus erat non orci. Vestibulum sagittis fringilla mi, vel feugiat ante suscipit in. Sed pellentesque nulla urna, vel interdum augue placerat vitae. Fusce vitae tortor et libero tempus blandit. Donec rutrum venenatis faucibus. Proin luctus rhoncus mauris, nec dictum nisl dapibus eget. Phasellus sollicitudin orci nec augue ultrices, eu vestibulum dolor tincidunt. Integer lobortis eget nibh non ultrices.
</div>
<div>
Cras molestie lectus eget nisi mattis varius. Morbi feugiat in turpis eu fermentum. Nullam et tempus mi, eget ultricies ex. In cursus, lorem id aliquet eleifend, velit ipsum ultricies nisl, sed ultricies nisi arcu ut augue. Nulla pretium ligula et ipsum sodales, vel scelerisque est porttitor. Nulla vitae mi eget quam sodales efficitur at non ex. Fusce imperdiet orci et urna varius rutrum. Donec efficitur tellus non tempor varius. In mattis tortor non metus porttitor fermentum. Etiam dapibus quam augue, et sollicitudin sem feugiat quis. Vestibulum id tortor a elit tempus ultricies semper sit amet nunc. </div>
</div>

I'm still trying to figure out the property position. Why won't my page scroll? (My first time using HTML)

Answer №1

Similar questions

Trouble experienced with the window.open() function on Safari

increasing sticky header, refreshes the scroll location of the website

When the mouse is moved to the UL LI list, the border color of the Top Hover is reverted back to default

Stylish CSS menu design

Personalized element IDs and unique CSS styles

Delete any content that is not enclosed in tags

The textbox is not able to process the complete input string provided

Unable to post form data into database due to Javascript undefined data situation

Utilizing d3.js to implement a scatterplot with zoom functionality that focuses solely on zooming the axis without affecting

Is my directive not displaying the desired content on the HTML page?

oversized user interface selection container

Can you provide instructions on creating a small border at the center of an h1 heading?

Is there a way to adjust the label size for a material ui TextField component?

Split a number in PHP into individual HTML tags for formatting

What is the method for configuring automatic text color in CKEditor?

Guide to generating a dropdown menu and linking it with data received from a server

How come JSOUP fails to read in UTF-8 format?

Is it possible to redirect my PDF File to my PHP homepage?

Receiving form input through an express route and attempting to insert it into a MySQL database results in empty entries

Tips for creating a subclass using jQuery