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

标签 html css

在固定元素内的绝对定位的 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>

完整代码笔链接:http://codepen.io/dmv912/pen/bgRQNB

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

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

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

(如果可能的话,我想要一个只有 CSS/SASS 的解决方案。)

最佳答案

position: absoluteposition: fixed 属性的组合作为父子组合在不同的浏览器中呈现不同(通常很奇怪),应该避免。

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

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>

关于html - 计算固定元素内绝对定位的div中固定div的宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41825982/

相关文章:

javascript - 使用data-selector后jquery的执行方式与使用text-selector后的执行方式不同吗?

php - php代码验证和rowcnt工作正常时遇到麻烦

javascript - 在不改变位置的情况下缩放 svg 组

html - 为什么更改元素的宽度会影响其兄弟元素?

html - 如何正确对齐 <label>、&lt;input&gt;、文本、输入字段、真实按钮和 "<a> link button"并使用相同的字体?

javascript - 更改 2 个进度条的过渡和样式

html - XML/XSLT 转换逻辑/If 语句/隐藏某些行

jquery - 是否可以获取现有的 CSS 规则属性,然后使用 jQuery 对其进行编辑

html - 如何将 QT HTML 字符串添加到 CSS 文件?

CSS 如何创建具有非线性边框的容器