计算固定元素内绝对定位的 div 内固定 div 的宽度

Question

在固定元素内的绝对定位的 div 中修复 div...

HTML：

<aside class="dialogs">
    <div class="dialog">
        <div class="has-fixed-progress">
            <div class="dialog__body">…(other divs and content) ...</div>

            <div class="dialog-fixed-progress-wrapper">
                <div class="dialog-fixed-progress">
                    <button class="btn--primary">Attach designs</button>
                </div>
            </div>
        </div>
    </div>
</aside>

完整的codepen链接：http://codepen.io/dmv912/pen/bgRQNB

我有一个 div .dialog-fixed-progress，您可以从 codepen 链接看到它在固定滑出菜单底部的绝对 div 内有一个固定位置，以确保它始终位于滑出底部，即使滑出具有可滚动的内容（这很好用）。

我的问题是计算和设置 .dialog-fixed-progress 的正确宽度以匹配父级 .dialogs 或 .dialog（对我有用），同时考虑到所有视口宽度（因此调整浏览器的大小）和对话框滚动条。

我似乎无法计算出正确的百分比/或像素和百分比的组合。任何帮助都会很棒！

（如果可能的话，我想要一个仅 CSS/SASS 的解决方案。）

Answer 1

position: absolute 和 position: fixed 属性的组合作为父子组合在不同的浏览器中呈现不同（而且通常很奇怪），应该避免。

以下position 属性和width to 元素应该可以帮助您。

body {
  background: red;
  padding: 0;
  margin: 0;
}
.dialogs {
  position: fixed;
  z-index: 9999;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.dialog {
  position: absolute;
  z-index: 2;
  background: white;
  top: 0;
  bottom: 0;
  right: 0;
  width: 50%;
  box-shadow: -1px 0 2px rgba(0, 0, 0, 0.1);
  animation-duration: 0.16s;
  overflow-y: auto;
}
.has-fixed-progress {
  float: left;
  width: 100%;
  height: 100%;
  position: relative;
}
.dialog-fixed-progress-wrapper {
  position: absolute;
  bottom: 0;
  height: 65px;
  width: 100%;
  z-index: 1;
}
.dialog__body {
  float: left;
  width: 100%;
}
.dialog-fixed-progress {
  position: fixed;
  z-index: 3;
  text-align: right;
  height: 40px;
  padding: 12px 0;
  border-top: 1px solid #efefef;
  background-color: blue;
  width: 50%;
}
button {
  background: green;
  float: right;
}

<body>
  <aside class="dialogs">
    <div class="dialog">
      <div class="has-fixed-progress">

        <div class="dialog__body">
          <p>…(other divs and content) ...
            <br/>…(other divs and content) ...
            <br/>…(other divs and content) ...
            <br/>…(other divs and content) ...
            <br/>…(other divs and content) ...
            <br/>…(other divs and content) ...
            <br/>…(other divs and content) ...
            <br/>…(other divs and content) ...
            <br/>…(other divs and content) ...
            <br/>…(other divs and content) ...
            <br/>…(other divs and content) ...
            <br/>…(other divs and content) ...
            <br/>…(other divs and content) ...
            <br/>…(other divs and content) ...
            <br/>…(other divs and content) ...
            <br/>…(other divs and content) ...
            <br/>…(other divs and content) ...
            <br/>…(other divs and content) ...
            <br/>…(other divs and content) ...
            <br/>…(other divs and content) ...
            <br/>…(other divs and content) ...
            <br/>…(other divs and content) ...
            <br/>…(other divs and content) ...
            <br/>…(other divs and content) ...
            <br/>…(other divs and content) ...
            <br/>…(other divs and content) ...
            <br/>…(other divs and content) ...
            <br/>…(other divs and content) ...
            <br/>…(other divs and content) ...
            <br/>…(other divs and content) ...
            <br/>…(other divs and content) ...
            <br/>…(other divs and content) ...
            <br/>…(other divs and content) ...
            <br/>…(other divs and content) ...
            <br/>…(other divs and content) ...
            <br/>
          </p>
        </div>

        <div class="dialog-fixed-progress-wrapper">
          <div class="dialog-fixed-progress">
            <button class="btn--primary">Attach designs</button>
          </div>
        </div>
      </div>
    </div>
  </aside>
</body>