CSS: position: fixed and width 90% too wide

Question

i'm using position: fixed and width 90% for a footer inside a overlay. The overlay and the footer are both 90% wider but the footer is wider. I guess it's because the footer ignores the scrollbar in chrome. Is there a way to solve this problem without JavaScript?

Here is quick example: https://jsfiddle.net/a15kpuL9/3/

The HTML:

<div class="modal hidden" data-modal-detail="5">
   <div class="container">
        <div class="body">
            <div id="inner-5" class="career-detail-inner-wrap"  >
                <div class="stickyFooter">
                </div>
            </div>
        </div>
    </div>
</div>

The CSS:

.stickyFooter {       
    width: 90%;
    text-align: center;
    position: fixed;
    bottom: 0;
    height: 150px;
    background-color: #F5F5F5;
}
.body {
    text-align: left;
    -webkit-box-shadow: -7px 0 31px 3px rgba(0, 0, 0, 0.16);
    display: inline-block;
    background-color: white;
    border-radius: 10px;
    margin-top: 150px;
    width: 90%;
}

The Problem:

Putting something as fixed will remove it from the parent div so it won't be relative to that div, it will be relative to the screen. It would need to be absolute to be relative to the parent div. — Thomas James, Nov 25 '20 at 09:49
Since i need to be sticked to bottom of the screen i need to adjust the width with JavaScript? — justcasper, Nov 25 '20 at 09:52
Can this help : https://stackoverflow.com/questions/5873565/set-width-of-a-position-fixed-div-relative-to-parent-div — Vipul Tawde, Nov 25 '20 at 09:56
please tell me the other answer i put helps, also https://jsfiddle.net/q5b01yfz/ — Vipul Tawde, Nov 25 '20 at 10:16
Nice! Good idea to use vw instead of %. That worked. Thank you! — justcasper, Nov 25 '20 at 10:30

score 1 · Accepted Answer · answered Nov 25 '20 at 10:13

change the 90% to 90 vw instead. Here you go. :)

.stickyFooter {
  width: 90vw;
  text-align: center;
  position: fixed;
  bottom: 0;
  height: 150px;
  background-color: red;
}

.body {
  text-align: left;
  -webkit-box-shadow: -7px 0 31px 3px rgba(0, 0, 0, 0.16);
  display: inline-block;
  background-color: white;
  border-radius: 10px;
  margin-top: 150px;
  width: 90vw;
}

.container {
  text-align: center;
  vertical-align: middle;
  overflow-y: scroll;
  height: 100%;
  display: block;
  width: 100%;
  position: absolute;
  right: 0;
  left: 0;
  margin: 0 !important;
  max-width: 100%;
  padding: 0;
}

.career-detail-inner-wrap {
  background: green;
  height: 800px
}

<div class="modal hidden" data-modal-detail="5">
  <div class="container">
    <div class="body">
      <div id="inner-5" class="career-detail-inner-wrap">
        Inner
        <div class="stickyFooter">
          Sticky
        </div>
      </div>
    </div>
  </div>
</div>

score 0 · Answer 2 · answered Nov 25 '20 at 09:53

0

I see one less closing div , could that be the problem

<div class="modal hidden" data-modal-detail="5">
    <div class="container">
        <div class="body">
        </div>
        <div id="inner-5" class="career-detail-inner-wrap"  >
            <div class="stickyFoooterSecond">
            </div>
        </div>
    </div>
</div>

or

<div class="modal hidden" data-modal-detail="5">
    <div class="container">
        <div class="body">
        <div id="inner-5" class="career-detail-inner-wrap"  >
            <div class="stickyFoooterSecond">
            </div>
        </div>
        </div>
    </div>
</div>

answered Nov 25 '20 at 09:53

Vipul Tawde

351
1
8

I just forgot to paste it. There are more markup than this, i just pasted the necessary party. ;) – justcasper Nov 25 '20 at 09:59
1

Could you make a Minimal Reproducible Example. – Vipul Tawde Nov 25 '20 at 10:00
also where is stickyFooter class applied , is the stickyFooterSecond class doing something – Vipul Tawde Nov 25 '20 at 10:02
Yes you are right. here is a quick example: https://jsfiddle.net/a15kpuL9/3/ – justcasper Nov 25 '20 at 10:06
ya that helps, in shoort you want red and green div to be same width that is 90% of screen , correct ? – Vipul Tawde Nov 25 '20 at 10:08

CSS: position: fixed and width 90% too wide

2 Answers2