父级fixed_CSS-应用position：fixed时是否可以保持父元素的宽度？

CSS-应用position：fixed时是否可以保持父元素的宽度？

当我们将

Click this to toggle position fixed for the left column

fixed content

some other content

应用于元素时，该元素被从文档的正常流程中删除，因此它不考虑其父元素的宽度。如果将其声明为百分比，是否有办法使其继承父对象的宽度？ (下面的工作用例)

Click this to toggle position fixed for the left column

fixed content

some other content

Click this to toggle position fixed for the left column

fixed content

some other content

Click this to toggle position fixed for the left column

fixed content

some other content

8个解决方案

34 votes

这是一个有趣的挑战。 为了解决这个问题，我们首先应该了解resize()的实际作用。

了解固定

与resize()不同，fixed不会将自己置于最接近的相对父级中。 而是fixed相对于视口定位自身。 视口将始终保持固定，这就是为什么获得效果的原因。

话虽如此，只要您“继承”任何宽度，它将对应于视口。 因此，当我们尝试将目标元素的宽度设置为其父元素的宽度时，这对我们没有好处。

了解更多有关头寸行为的信息。

快速解决方案

有两种方法可以解决此问题。

纯CSS

我们可以使用纯CSS来解决此问题，但是我们需要提前知道宽度。 假设其父元素为resize()

.parent{

width: 300px;

}

.parent .fixed_child{

position: fixed;

width: 300px;

}

JS

现在，使用移动设备时，我们真的没有设置宽度的奢侈，尤其是超过resize()的宽度。使用百分比也不起作用，因为它是相对于视口而不是父元素。 我们可以使用JS(在这种情况下使用jQuery)来实现此目的。 让我们看一个始终在给定时刻设置父对象宽度的函数：

function toggleFixed () {

var parentwidth = $(".parent").width();

$(".child").toggleClass("fixed").width(parentwidth);

}

CSS：

.fixed{

position:fixed;

}

在CodePen中查看

动态宽度

很好，很花哨，但是如果当用户仍在页面上时窗口的宽度改变了，从而改变了父元素，会发生什么呢？ 虽然父级可以调整其宽度，但子级将保持该功能所设置的宽度。 我们可以使用jQuery resize()事件侦听器解决此问题。 首先，我们需要将创建的函数分成两个部分：

function toggleFixed() {

adjustWidth();

$(".child").toggleClass("fixed");

}

function adjustWidth() {

var parentwidth = $(".parent").width();

$(".child").width(parentwidth);

}

现在我们已经分离了每个部分，我们可以分别调用它们，我们将包括我们的原始按钮方法，该方法可以切换固定和宽度：

$("#fixer").click(

function() {

toggleFixed();

});

现在，我们还将调整大小事件侦听器添加到窗口中：

$(window).resize(

function() {

adjustWidth();

})

在CodePen中查看

那里！ 现在我们有了一个固定的元素，该元素的大小将在调整窗口大小时进行调整。

结论

我们通过了解fixed的位置及其局限性解决了这一难题。 与Absolute不同，fixed仅与视口相关，因此不能继承其父对象的宽度。

为了解决这个问题，我们需要使用一些JS魔术来实现这一目标，而JS魔术在jQuery中并不需要很多。

在某些情况下，我们需要一种动态方法，使用可变宽度的缩放设备。 同样，我们采用了JS方法。

Philll_t answered 2020-02-12T02:04:58Z

12 votes

您可以使用width:inherit。这将使其侦听父级。 我对其进行了测试，并且可以在Firefox中运行。

egon12 answered 2020-02-12T02:05:18Z

5 votes

宽度在变化，因为静态对象从其父对象接收其百分比宽度。 将对象设置为固定后，它就不再处于流动状态并调整大小。

您将不得不自行为导航菜单设置大小，而不希望元素从父级获取宽度。

.nav {

position: fixed;

width: 20%;

border: 1px solid green;

padding: 0px;

list-style-type:none;

background:lightblue;

}

[http://tinker.io/3458e/5]

Michael Rader answered 2020-02-12T02:05:47Z

4 votes

嗨，您还可以使用jquery保持宽度。 例如：

jQuery(function($) {

function fixDiv() {

var $cache = $('#your-element');

var $width = $('#your-element').parent().width();

if ($(window).scrollTop() > 100) {

$cache.css({

'position': 'fixed',

'top': '10px',

'width': $width

});

} else {

$cache.css({

'position': 'relative',

'top': 'auto'

});

}

}

$(window).scroll(fixDiv);

fixDiv();

});

khoekman answered 2020-02-12T02:06:07Z

3 votes

这可能是由于或body { margin:0; }元素上的某些默认边距或填充。 静态时，其大小基于当时的width:calc(n% - 5px);宽度，但是当其更改为position:fixed时，则根据视口进行大小调整。

因此，删除该默认边距/填充应该可以解决问题(以我的经验body { margin:0; }可以解决此问题)，并且应在固定后更改大小(例如width:calc(n% - 5px);)。

Zach Saucier answered 2020-02-12T02:06:32Z

2 votes

就像有人已经暗示的那样，使用javascript是最好的解决方案。

没有jQuery。

const parentElement = document.querySelector('.parent-element');

const fixedElement = document.querySelector('.fixed-element');

// get parent-element width when page is fully loaded

// and change fixed-element width accordingly

window.addEventListener('load', changeFixedElementWidth);

// get parent-element width when window is resized

// and change fixed-element width accordingly

window.addEventListener('resize', changeFixedElementWidth);

function changeFixedElementWidth() {

const parentElementWidth = parentElement.getBoundingClientRect().width;

fixedElement.style.width = parentElementWidth + 'px';

}

pldg answered 2020-02-12T02:06:56Z

0 votes

解决方法可能是：导航的CSS中的left:8px; right:0; width:18%;。虽然不是最好的解决方案。

Simke Nys answered 2020-02-12T02:07:17Z

-3 votes

将width:auto;添加到具有position:fixed;的元素，以使其宽度等于其父元素的宽度。

Naveen Attri answered 2020-02-12T02:07:37Z