gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 04:29:00 25 4
gpt4 key购买 nike

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

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com