Question

将div固定在固定元素中绝对定位的div中...

HTML：

color_code = {"1" => "success", "2" => "warning", "3" => "danger"}`
color_code["#{project.status}"]

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

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

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

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

（如果可能的话，我只喜欢CSS / SASS解决方案。）

Answer 1

position: absolute＆amp;的组合作为父子组合的position: fixed属性在不同的浏览器中以不同的方式呈现（通常很奇怪），应该避免使用。

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: