19

想象：

<div class="outer">
    <div class="inner">
    </div>
</div>

在哪里：

  • .outer是列结构的一部分，它的宽度是百分位数，因此是流动的。
  • .inner表示fixed应该以 100% 宽度填充元素的位置.outer元素。然而，它的垂直位置保持不变，因此fixed。

我尝试使用以下 CSS 实现此布局：

.outer {
    position: relative;
    width: %;
}
.inner {
    position: fixed;
    width: 100%;
}

但是，.inner不会将其宽度计算为relative其父级的百分比。相反，它填充了窗口/文档的整个宽度。尝试任何left或right属性都会导致相同的忽略父级的品质。

有没有办法解决？

4

7 回答 7

7 
.outer {
    position: relative;
    width: %;
}
.inner {
    position: fixed;
    width: inherit;
}

这应该够了吧。

于 2014-10-08T20:39:59.380 回答
4

position: fixed总是相对于窗口/浏览器，因此它不能用来解决你的问题。固定定位将元素从 DOM 的自然顺序中移除，因此不再保留在您的外部 div 中，因此它占用了浏览器的整个宽度而不是容器的整个宽度。您需要使用的是position: absolute相.inner对于.outer. 您将能够定位您的元素以及将其宽度包含在.outerdiv 中。

于 2014-01-20T08:53:20.140 回答
3

用这个 ：

.inner { 位置：固定；左：0；对：0；

}

于 2015-07-10T10:01:56.863 回答
1

固定元素仅采用绝对值作为宽度。如果你的父容器是流体的（宽度是百分比），你需要动态设置固定元素的宽度。您需要获取包装容器的宽度并将其设置在粘性元素上。

CSS

.outer {width: 25%;}
.inner {position: fixed;}

JS

var fixedWidth = $('.outer').css('width');
$('.inner').css('width', fixedWidth);

此外，您可以在窗口调整大小时添加事件侦听器。

JS

window.addEventListener('resize', resize);
function resize() {
    var fixedWidth = $('.outer').css('width');
    $('.inner').css('width', fixedWidth);
}
于 2016-06-20T00:53:43.493 回答
0

使用这样的小提琴怎么样？

.outer {
    width: 20%;
    height: 1200px;
    margin-left: 5%;
    float: left;
}
.inner {
    height: 200px;
    position: fixed;
    top: 0;
    background: orange;
    right: 75%;
    left: 5%;
}
于 2014-02-08T05:41:59.167 回答
0

您可以查看我制作的这个jsfiddle，它说明了您的问题的解决方法，您可以完全按照您想要的方式使用此代码。

于 2012-09-03T22:31:07.550 回答
0

position:fixed总是相对于视口/浏览器窗口，而不是祖先。

于 2014-01-28T06:34:04.400 回答