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

Html – Bottom drawer with fixed header and scrollable content

I have a simple bottom drawer with a header fixed and rounder borders.
The content is scrollable so it goes up behing the fixed header.
The problem is that we can see the content and also the background of the content behind the header at top left and right.

How to make the content scrollable but the top limit should be the bottom of the header, not the top ? thank you.

See here also because the scroll doesn’t appear here : https://codepen.io/JeffProd-the-encoder/pen/yLQyJLp

#bottomdrawer {
  width: 200px;
  max-height: 200px;
  position: fixed;
  left: 0px;
right: 0px;
  bottom: 0px;
  overflow-y: auto;
}

#header {
  position: fixed;
  width: 200px;
  background-color: rgb(107 114 128);
  border-top-left-radius: 1.0rem;
border-top-right-radius: 1.0rem;
}

#content {
background-color: rgb(200 200 200);
}
<div id="bottomdrawer">
  <div id="header">
    TITLE
  </div>
  <div id="content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque molestie rhoncus erat, et venenatis leo accumsan sed. Vivamus maximus molestie aliquet. Ut feugiat in ex ac posuere. Vivamus maximus molestie aliquet. Ut feugiat in ex ac posuere.  Vivamus maximus molestie aliquet. Ut feugiat in ex ac posuere.
  </div>
</div>
Tags:

2

Answers


  1. 0

    Probably, it is not necessary to make the #header fixed, because the #bottomdrawer is already fixed. It is better set #content { overflow-y: auto; }:

    #bottomdrawer {
  width: 200px;
  height: min(200px, 100%);
  position: fixed;
  inset: auto 0 0;
  display: flex;
  flex-direction: column;
}

#header {
  background-color: rgb(107 114 128);
  border-radius: 1rem 1rem 0 0;
  padding: .5rem 1rem;
}

#content {
  background-color: rgb(200 200 200);
  overflow-y: auto;
  flex: auto;
}
    <div id="bottomdrawer">
  <div id="header">
    TITLE
  </div>
  <div id="content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque molestie rhoncus erat, et venenatis leo accumsan sed. Vivamus maximus molestie aliquet. Ut feugiat in ex ac posuere. Vivamus maximus molestie aliquet. Ut feugiat in ex ac posuere.  Vivamus maximus molestie aliquet. Ut feugiat in ex ac posuere.
  </div>
</div>
    Login or Signup to reply.
  2. 0

    You can use border-top-left and right radius 2px not rem, and padding 5px

    #bottomdrawer {
  width: 200px;
  max-height: 200px;
  position: fixed;
  left: 0px;
  right: 0px;
  bottom: 0px;
  overflow-y: auto;
}

#header {
  position: fixed;
  width: 200px;
  background-color: rgb(107 114 128);
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
  padding: 5px
}

#content {
  background-color: rgb(200 200 200);
}
    <div id="bottomdrawer">
  <div id="header">
    TITLE
  </div>
  <div id="content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque molestie rhoncus erat, et venenatis leo accumsan sed. Vivamus maximus molestie aliquet. Ut feugiat in ex ac posuere. Vivamus maximus molestie aliquet. Ut feugiat in ex ac posuere. Vivamus
    maximus molestie aliquet. Ut feugiat in ex ac posuere.
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search