CSS：位置：固定，宽度 90% 太宽

Question

我正在使用 position: fixed 和 width 90% 作为叠加层内的页脚。叠加层和页脚都宽了 90%，但页脚更宽。我猜这是因为页脚忽略了 chrome 中的滚动条。有没有办法不用JavaScript解决这个问题？

这是一个简单的例子：https://jsfiddle.net/a15kpuL9/3/

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>

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%;
}

问题：

Answer 1

我看到少了一个关闭 div ，这可能是问题所在

<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>

或

<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>

Answer 2

改为将 90% 更改为 90 vw。干得好。 :)

.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>

CSS：位置：固定，宽度 90% 太宽

CSS: position: fixed and width 90% too wide

css

css-position