Question 344318 in Html Question posted in
Some basic documentation can be found here.

Html – How to avoid content div overlapping a footer div inside a scrollable container

Please tell me how I can set a margin or padding to a #list element so that when the final scroll occurs, the #menu does not overlap the #list div?

I know that you can set a margin bottom to the last element of the #list div, but is there a different way to do it?

#home {
  width: 200px;
  height: 300px;
  position: fixed;
  background: blue;
  overflow: hidden;
}

#list {
  width: 100%;
  height: 100%;
  background: green;
  overflow-y: scroll;
  padding-bottom: 50px;
  margin-bottom: 50px;
}

#list div {
  width: 100%;
  height: 150px;
  background: gray;
  margin-bottom: 20px;
}

#menu {
  position: absolute;
  bottom: 0px;
  background: rgb(255 0 0 / 20%);
  width: 100%;
  height: 50px;
  z-index: 1;
}
<div id="home">
  <div id="list">
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div id="menu"></div>
</div>
Tags:

2

Answers


  1. 0

    I think it is a good practice to do

    * {
    box-sizing: border-box;
}

    At top of your css file.

    border-box tells the browser to account for any border and padding in the values you specify for an element’s width and height. – https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

    I don’t know why it isn’t default behaviour because you want this at 100% of time.

    Login or Signup to reply.
  2. 0

    If you only want the list div to scroll, you can use flex (with this, the menu div is always flush to the bottom and the child div margin is contained within the list – the scroll bar also only appears on the list div):

    #home {
  width: 200px;
  height: 300px;
  background: blue;
  display: flex;
  flex-direction: column;
}

#list {
  width: 100%;
  flex-grow: 1;
  background: green;
  overflow-y: scroll;
}

#list div {
  width: 100%;
  height: 150px;
  background: gray;
  margin-bottom: 20px;
}

#menu {
  background: rgb(255 0 0 / 20%);
  width: 100%;
  min-height: 50px;
  max-height: 50px;
}
    <div id="home">
  <div id="list">
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div id="menu"></div>
</div>

    If you want the whole div to scroll, you can use sticky (with this, the menu is below the last div or stuck to the bottom of the container if the content is longer. The scrollbar is on the containing div and the last list div margin collapses outside the list div, which is why you get blue above the menu instead of green):

    #home {
  width: 200px;
  height: 300px;
  background: blue;
  position: relative;
  overflow-y: scroll;
}

#list {
  width: 100%;
  background: green;
}

#list div {
  width: 100%;
  height: 150px;
  background: gray;
  margin-bottom: 20px;
}

#menu {
  position: sticky;
  bottom: 0;
  background: rgb(255 0 0 / 20%);
  width: 100%;
  height: 50px;
}
    <div id="home">
  <div id="list">
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div id="menu"></div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search