CODEWITHSUNDEEP
javascripthtmlcss
Pace
Pace

Reputation: 43817

Adjust element width to scrollbar in parent

I have a card that has a bunch of text in it. If the text is too large for the card I want to add a scrollbar. The card also has a footer. My problem is that I want the footer to shrink slightly if there is a scrollbar. I don't want my footer to be present underneath the scrollbar.

enter image description here

In the actual application the footer is like the Microsoft Word ruler:

enter image description here

I can put the footer inside the overflow-y region but then it is no longer sticky (always visible).

Here is the code: 

#box {
  width: 300px;
  height: 300px;
  display: flex;
  flex-direction: column;
}

#content {
  flex: 1 1 auto;
  overflow-y: auto;
}

#stickyFooter {
  flex: 0 0 auto;
  background: red;
  height: 30px;
}
<div id="box">
  <div id="content">
    <p>BLAHBLAHBLAHBLAHBLAHBLHAH</p>
    <p>BLAHBLAHBLAHBLAHBLAHBLHAH</p>
    <p>BLAHBLAHBLAHBLAHBLAHBLHAH</p>
    <p>BLAHBLAHBLAHBLAHBLAHBLHAH</p>
    <p>BLAHBLAHBLAHBLAHBLAHBLHAH</p>
    <p>BLAHBLAHBLAHBLAHBLAHBLHAH</p>
    <p>BLAHBLAHBLAHBLAHBLAHBLHAH</p>
    <p>BLAHBLAHBLAHBLAHBLAHBLHAH</p>
    <p>BLAHBLAHBLAHBLAHBLAHBLHAH</p>
    <p>BLAHBLAHBLAHBLAHBLAHBLHAH</p>
    <p>BLAHBLAHBLAHBLAHBLAHBLHAH</p>
  </div>
  <div id="stickyFooter"></div>
</div>

An ideal solution would be CSS/HTML and not require JS.

Upvotes: 0

Views: 58

Answers (1)

Temani Afif
Temani Afif

Reputation: 272744

You can include the footer inside the content and use position:sticky (https://caniuse.com/#feat=css-sticky)

#box {
  width: 300px;
  height: 200px;
  display: flex;
  flex-direction: column;
}

#content {
  flex: 1 1 auto;
  overflow-y: auto;
}

#stickyFooter {
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  background: red;
  height: 30px;
}
<div id="box">
  <div id="content">
    <p>BLAHBLAHBLAHBLAHBLAHBLHAH</p>
    <p>BLAHBLAHBLAHBLAHBLAHBLHAH</p>
    <p>BLAHBLAHBLAHBLAHBLAHBLHAH</p>
    <p>BLAHBLAHBLAHBLAHBLAHBLHAH</p>
    <p>BLAHBLAHBLAHBLAHBLAHBLHAH</p>
    <p>BLAHBLAHBLAHBLAHBLAHBLHAH</p>
    <p>BLAHBLAHBLAHBLAHBLAHBLHAH</p>
    <p>BLAHBLAHBLAHBLAHBLAHBLHAH</p>
    <p>BLAHBLAHBLAHBLAHBLAHBLHAH</p>
    <p>BLAHBLAHBLAHBLAHBLAHBLHAH</p>
    <p>BLAHBLAHBLAHBLAHBLAHBLHAH</p>
    <p>end</p>
    <div id="stickyFooter"></div>
  </div>
</div>

Upvotes: 1

Related Questions