Fixed position and overflow scroll in CSS

Question

I have modal form with fixed position.

HTML:

<div class="wrap">
  <div class="box">
    <div class="header">
      Form header
    </div>
    <div class="content">
      Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content
      Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content
      Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content
      Content Content Content Content Content Content Content Content Content Content Content
    </div>
  </div>
</div>

I'd like to have scrollable content in my form (div class="content"), but CSS property overflow-y: scroll not working correctly. Scroll bar appears but content not hidden.

CSS:

.wrap {
  position: fixed;
  background-color: rgba(0, 0, 0, 0.4);
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.box {
  position: fixed;
  background: #fff;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
  border-radius: 2px;
  top: 50%;
  left: 50%;
  max-height: calc(100% - 50px);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.header {
  padding: 10px;
  background-color: #f5f5f5;
  border-radius: 2px;
}

.content {
  padding: 10px 15px;
  border-top: 1px solid #ddd;
  max-height: 100%;
  overflow-y: scroll;
}

Demo:

jsfiddle

Please check this link it will help you codepen.io/nehemc/pen/ZOyGOB — Nehemiah
– Nehemiah, Commented Jul 3, 2016 at 14:06
Thank you, with fixed height work correct, but I want to make the content height dynamic. If content more than 100% - 50px scroll must appear — Max
– Max, Commented Jul 3, 2016 at 14:24
.content { min-height: 30vh; max-height: 60vh; } you can adjust the value of height — Nehemiah
– Nehemiah, Commented Jul 3, 2016 at 14:31

Stickers · Accepted Answer · 2016-07-03 14:22:45Z

2

You can use flexbox, it works great with dynamic height of the header and content area.

Set the container to display: flex; flex-direction: column;, set the content to flex: 1; so it expands to take all the space available apart from the header.

.wrap {
  position: fixed;
  background-color: rgba(0, 0, 0, 0.4);
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.box {
  position: fixed;
  background: #fff;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
  border-radius: 2px;
  max-height: calc(100% - 50px);
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 50%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.header {
  padding: 10px;
  background-color: #f5f5f5;
  border-radius: 2px;
}
.content {
  flex: 1;
  padding: 10px;
  border-top: 1px solid #ddd;
  overflow-y: auto;
}

<div class="wrap">
  <div class="box">
    <div class="header">
      Header
    </div>
    <div class="content">
      <div style="height:2000px;">Content</div>
    </div>
  </div>
</div>

jsFiddle

answered Jul 3, 2016 at 14:22

Stickers

79.2k24 gold badges157 silver badges195 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Max Over a year ago

Thank you! Flexbox that's what I need!

Robert · Accepted Answer · 2016-07-03 14:01:12Z

0

changing your .content class to have a fixed value of height instead of a percentage for max-height seems to correct the issue, for example:

.content { height: 250px; }

answered Jul 3, 2016 at 14:01

Robert

6,9871 gold badge23 silver badges28 bronze badges

1 Comment

Max Over a year ago

I know that with fixed height scroll work correct, but I need form with dynamic height content.

G-Cyrillus · Accepted Answer · 2016-07-03 14:26:28Z

.content max-height: xx%; will be % of null (not effective at all), because no height is specified on .box.

You may use flex or rethink structure and centering method( many ways).

flex example use of 3 extra line of css (see comments /* here */ ):

.wrap {
  position: fixed;
  background-color: rgba(0, 0, 0, 0.4);
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.box {
  position: fixed;
  display: flex;/* here */
  flex-flow: column;/* here */
  background: #fff;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
  border-radius: 2px;
  top: 50%;
  left: 50%;
  max-height: calc(100% - 50px);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.header {
  padding: 10px;
  background-color: #f5f5f5;
  border-radius: 2px;
}
.content {
  padding: 10px 15px;
  border-top: 1px solid #ddd;
  flex: 1;/* here */
  overflow-y: scroll;
}

<div class="wrap">
  <div class="box">
    <div class="header">
      Form header
    </div>
    <div class="content">
      Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content
      Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content
      Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content
      Content Content Content Content Content Content Content Content Content Content Content
    </div>
  </div>
</div>

Nehemiah · Accepted Answer · 2016-07-03 14:32:43Z

Could please try this code.

.wrap {
  position: fixed;
  background-color: rgba(0, 0, 0, 0.4);
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.box {
  position: fixed;
  background: #fff;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
  border-radius: 2px;
  top: 50%;
  left: 50%;
  max-height: calc(100% - 50px);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);

}

.header {
  padding: 10px;
  background-color: #f5f5f5;
  border-radius: 2px;
}

.content {
  padding: 10px 15px;
  border-top: 1px solid #ddd;
  min-height: 30vh;
  max-height: 60vh;
  overflow-y: scroll;
  background:#fff;
}

<div class="wrap">
  <div class="box">
    <div class="header">
      Form header
    </div>
    <div class="content">
      Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content
      Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content
      Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content
      Content Content Content Content Content Content Content Content Content Content Content
    </div>
  </div>
</div>

Esmeraldi Bejolli · Accepted Answer · 2016-07-03 14:42:30Z

0

hello there is an working fiddle

hope this help

answered Jul 3, 2016 at 14:42

Esmeraldi Bejolli

1117 bronze badges

Comments

Hussain Rauf · Accepted Answer · 2016-07-03 14:48:22Z

Set height in pixels rather than percentage and set overflow property to auto. If you would set height to 100% then the div will grow vertically according to content, to fix this issue you have to set height in pixels. Overflow:auto; will automatically provide the scroll bar as height is fixed. Like this:

.content {
  padding: 10px 15px;
  border-top: 1px solid #ddd;
  max-height: 200px;
  overflow: auto;
}

If you need dynamic content height then try following code and play with it:

.content {
  padding: 10px 15px;
  border-top: 1px solid #ddd;
  min-height:200px;
  max-height:100%;
  position: fixed;
  overflow:auto;
  background-color:white;
}

The best solution is to use flexbox. Add following properties:

.box
{
  display:flex;
  flex-flow:column;
} 
.content
{
flex: 1;
}

Remove height:100&; from content class.

Alamakanambra · Accepted Answer · 2022-08-30 18:19:40Z

0

With Tailwind CSS:

<div class="bg-gray-500 pt-10 ">
  Normal page content
  <div class="fixed top-0 h-full flex flex-col w-1/2  ">
    <div class="overflow-y-auto">
          <div class="h-[2000px] bg-gradient-to-b from-red-500/60 to-blue-500/60">
            Scrollable content in fixed div
          </div>
    </div>
  </div>
</div>

edited Aug 30, 2022 at 18:19

answered Aug 30, 2022 at 17:39

Alamakanambra

8,0566 gold badges46 silver badges62 bronze badges

Collectives™ on Stack Overflow

Fixed position and overflow scroll in CSS

7 Answers 7

1 Comment

1 Comment

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

1 Comment

1 Comment

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related