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

What are the best techniques for positioning text next to images in HTML and CSS?

Aligning Content in the Center of a CSS Grid

Is it possible to use an :after background-image to layer on top of the following element?

Troubleshooting problem with sorting in Angular 4 material header

Can you identify the issue with the phase control in my sine wave program?

Looking for a list that you can edit with CSS styling?

Access a webpage whose URL has been dynamically assigned using JavaScript

Expanding Iframes in Joomla K2

Is it possible to manipulate the content inside a div tag using JavaScript in HTML?

An error occurred: [object Object] does not support the 'popup' method

Customize default zoom settings with Cascading Style Sheets (CSS)

"Exploring the interactivity of touch events on JavaScript

Steps to transfer text from one input field to another by clicking a button using JavaScript

Creating an image rollover effect when hovering between two images

Combining 2 divs harmoniously

What are some ways to ensure keyboard accessibility for a CSS drop-down menu?

Tips for accessing the height property of an image

How to use Vue.js to automatically redirect to a URL when a button is clicked

The jQuery `.load` function appears to be malfunctioning

What could be causing the padding of my anchor element to extend outside the boundaries of its parent list