Unable to reach the bottom due to fixed div placement with offset

Question

Unable to reach the bottom due to fixed div placement with offset

There's a fixed sidebar div that is offset by using top: 90px. However, it seems that you can't scroll all the way down in this div. Interestingly, if you change the offset to top: 0px;, everything works as expected.

body {
  font: 76%/150% Arial, Helvetica, sans-serif;
  color: #666;
  width: 100%;
  height: 100%;
}
#sidebar {
  position: fixed;
  top: 90px;
  left: 0;
  width: 20%;
  height: 100%;
  background: #EEE;
  overflow: auto;
}
#content {
  width: 80%;
  padding-left: 20%;
}
@media screen and (max-height: 200px) {
  #sidebar {
    color: blue;
    font-size: 50%;
  }
}

<div id="sidebar">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lacinia libero eget mi rhoncus laoreet. In hac habitasse platea dictumst. Etiam placerat congue mi quis feugiat. Aliquam placerat sagittis consectetur. Nulla iaculis tincidunt leo vel luctus.
  Pellentesque euismod tincidunt diam, quis porta erat laoreet a. Mauris pellentesque purus ac eros elementum et rutrum orci iaculis. Morbi tincidunt posuere nulla a commodo. Curabitur eu ligula diam. Pellentesque fringilla, felis in tincidunt adipiscing,
  nisi eros consectetur felis, quis sollicitudin purus quam ut metus. Integer imperdiet nulla id diam ultricies ut ultricies nisl eleifend. Duis tortor tellus, laoreet nec pellentesque ut, euismod non lectus.</div>
<div id="content">Cras gravida, diam non adipiscing cursus, sapien urna adipiscing enim, at faucibus nunc felis at turpis. Aliquam erat volutpat. Nulla facilisi. Aenean nec nisi gravida ante convallis euismod sed quis odio. Sed nulla est, fringilla vel rhoncus vel, fermentum
  et turpis. Curabitur eu posuere tortor. Integer sit amet nisl elit, gravida rutrum ipsum. Cras nisl est, sodales quis faucibus nec, tempus vel libero. Aliquam lobortis gravida erat, in placerat libero ultricies in. Curabitur volutpat lorem ut ligula
  aliquet a fermentum augue porttitor. Vestibulum varius, purus id sollicitudin tincidunt, velit felis tincidunt erat, ut feugiat augue diam commodo lorem. Donec in augue non est tincidunt consequat. Mauris nec justo eget augue varius pulvinar id ut risus.
  Donec fringilla, enim vitae tincidunt accumsan, urna elit laoreet tellus, ac gravida dolor dolor ac quam. Vestibulum dignissim felis quis tortor sollicitudin ut placerat mi adipiscing.</div>

JSFiddle

If I want to maintain top: 90px; and still be able to scroll to the bottom, what adjustments do I need to make?

html css

Answer 1

Answer №1

The main issue here is that the #sidebar element is set to have a height: 100%;. This causes it to take up the entire height of the viewport, resulting in the bottom part of the div being hidden when you offset the top by 90px.

To resolve this problem, one solution is to use the calc function to subtract the 90px offset from the height.

To fix this issue, modify the #sidebar CSS rule to change height: 100%; to height: calc(100% - 90px);

body {
  font: 76%/150% Arial, Helvetica, sans-serif;
  color: #666;
  width: 100%;
  height: 100%;
}
#sidebar {
  position: fixed;
  top: 90px;
  left: 0;
  width: 20%;
  height: calc(100% - 90px);
  background: #EEE;
  overflow: auto;
}
#content {
  width: 80%;
  padding-left: 20%;
}
@media screen and (max-height: 200px) {
  #sidebar {
    color: blue;
    font-size: 50%;
  }
}

<div id="sidebar">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lacinia libero eget mi rhoncus laoreet. In hac habitasse platea dictumst. Etiam placerat congue mi quis feugiat. Aliquam placerat sagittis consectetur. Nulla iaculis tincidunt leo vel luctus.
  Pellentesque euismod tincidunt diam, quis porta erat laoreet a. Mauris pellentesque purus ac eros elementum et rutrum orci iaculis. Morbi tincidunt posuere nulla a commodo. Curabitur eu ligula diam. Pellentesque fringilla, felis in tincidunt adipiscing,
  nisi eros consectetur felis, quis sollicitudin purus quam ut metus. Integer imperdiet nulla id diam ultricies ut ultricies nisl eleifend. Duis tortor tellus, laoreet nec pellentesque ut, euismod non lectus.</div>
<div id="content">Cras gravida, diam non adipiscing cursus, sapien urna adipiscing enim, at faucibus nunc felis at turpis. Aliquam erat volutpat. Nulla facilisi. Aenean nec nisi gravida ante convallis euismod sed quis odio. Sed nulla est, fringilla vel rhoncus vel, fermentum
  et turpis. Curabitur eu posuere tortor. Integer sit amet nisl elit, gravida rutrum ipsum. Cras nisl est, sodales quis faucibus nec, tempus vel libero. Aliquam lobortis gravida erat, in placerat libero ultricies in. Curabitur volutpat lorem ut ligula
  aliquet a fermentum augue porttitor. Vestibulum varius, purus id sollicitudin tincidunt, velit felis tincidunt erat, ut feugiat augue diam commodo lorem. Donec in augue non est tincidunt consequat. Mauris nec justo eget augue varius pulvinar id ut risus.
  Donec fringilla, enim vitae tincidunt accumsan, urna elit laoreet tellus, ac gravida dolor dolor ac quam. Vestibulum dignissim felis quis tortor sollicitudin ut placerat mi adipiscing.</div>

Answer 2

The main issue here is that the #sidebar element is set to have a height: 100%;. This causes it to take up the entire height of the viewport, resulting in the bottom part of the div being hidden when you offset the top by 90px.

To resolve this problem, one solution is to use the calc function to subtract the 90px offset from the height.

To fix this issue, modify the #sidebar CSS rule to change height: 100%; to height: calc(100% - 90px);

body {
  font: 76%/150% Arial, Helvetica, sans-serif;
  color: #666;
  width: 100%;
  height: 100%;
}
#sidebar {
  position: fixed;
  top: 90px;
  left: 0;
  width: 20%;
  height: calc(100% - 90px);
  background: #EEE;
  overflow: auto;
}
#content {
  width: 80%;
  padding-left: 20%;
}
@media screen and (max-height: 200px) {
  #sidebar {
    color: blue;
    font-size: 50%;
  }
}

<div id="sidebar">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lacinia libero eget mi rhoncus laoreet. In hac habitasse platea dictumst. Etiam placerat congue mi quis feugiat. Aliquam placerat sagittis consectetur. Nulla iaculis tincidunt leo vel luctus.
  Pellentesque euismod tincidunt diam, quis porta erat laoreet a. Mauris pellentesque purus ac eros elementum et rutrum orci iaculis. Morbi tincidunt posuere nulla a commodo. Curabitur eu ligula diam. Pellentesque fringilla, felis in tincidunt adipiscing,
  nisi eros consectetur felis, quis sollicitudin purus quam ut metus. Integer imperdiet nulla id diam ultricies ut ultricies nisl eleifend. Duis tortor tellus, laoreet nec pellentesque ut, euismod non lectus.</div>
<div id="content">Cras gravida, diam non adipiscing cursus, sapien urna adipiscing enim, at faucibus nunc felis at turpis. Aliquam erat volutpat. Nulla facilisi. Aenean nec nisi gravida ante convallis euismod sed quis odio. Sed nulla est, fringilla vel rhoncus vel, fermentum
  et turpis. Curabitur eu posuere tortor. Integer sit amet nisl elit, gravida rutrum ipsum. Cras nisl est, sodales quis faucibus nec, tempus vel libero. Aliquam lobortis gravida erat, in placerat libero ultricies in. Curabitur volutpat lorem ut ligula
  aliquet a fermentum augue porttitor. Vestibulum varius, purus id sollicitudin tincidunt, velit felis tincidunt erat, ut feugiat augue diam commodo lorem. Donec in augue non est tincidunt consequat. Mauris nec justo eget augue varius pulvinar id ut risus.
  Donec fringilla, enim vitae tincidunt accumsan, urna elit laoreet tellus, ac gravida dolor dolor ac quam. Vestibulum dignissim felis quis tortor sollicitudin ut placerat mi adipiscing.</div>

Answer 3

Answer №2

Kindly update the CSS link provided below. This will ensure your DIV remains fixed at the bottom with an automatic 90px space from the top.

#sidebar {
    position: fixed;
    bottom: 0px;
    left: 0;
    width: 20%;
    height: calc(100% - 90px);
    background: #EEE;
    overflow: auto;
}

Answer 4

Kindly update the CSS link provided below. This will ensure your DIV remains fixed at the bottom with an automatic 90px space from the top.

#sidebar {
    position: fixed;
    bottom: 0px;
    left: 0;
    width: 20%;
    height: calc(100% - 90px);
    background: #EEE;
    overflow: auto;
}

Unable to reach the bottom due to fixed div placement with offset

Answer №1

Answer №2

Similar questions

Adjust and resize video backgrounds within parent elements on iframes

Ensuring that the text-box is the same size as the image

Horizontal Scroll HTML

The container div with a gradient background doesn't support the use of height: auto

What is the best way to generate a variable amount of div elements with constantly changing content using Angular2?

Reordering divs in one column with CSS Flexbox to transition to a two-column layout upon resizing the screen

Place the second division beneath the first within a single navigation bar that adjusts accordingly to all screen sizes

Capture audio using a web browser

Tips for showcasing heading and paragraph elements side by side in css?

Showing a series of text entries one after the other, each appearing with a smooth fade-in and fade-out

Utilize the CSS content property to embed an image without causing it to distort in size

When using PHP code, the col-md-4 divs are positioned vertically instead of horizontally

Create a slider feature on a webpage using the Google Maps API

Is the HTML5 capture attribute compatible with wkwebview?

Modify the image inside a div when hovering

On the initial click of the button, the color will switch, and on the subsequent click,

Tips for Implementing CSS Styles on Ruby on Rails HTML Pages

Determination of the input parameters

Confirm that only the days of the present month are eligible for selection

Tips for vertically aligning input field text and checkboxes