Css 应用“位置：固定”时，是否可以保持父元素的宽度？

当我们将

position:fixed

应用于元素时，它是从文档中获取的，因此它不尊重其父元素的元素宽度。 如果将其声明为百分比，是否有方法使其继承其父级的宽度？（下面的工作用例）

let widthis=$（'.box'）.width（）；
$（'.dimensions'）.text（`width is${widthis}`）；
$（'button'）。在（'click'，function（）上{
$（'.box'）.toggleClass（'fixed'）；
设widthis=$（'.box'）.width（）；
$（'.dimensions'）.text（`width is${widthis}`）；
});
.container{
最大宽度：500px；
高度：1000px；
}
.盒子{
背景颜色：浅绿色；
}
.固定{
位置：固定；
}
.col-1{
边框：1px纯红；
浮动：左；
宽度：29%；
}
.col-2{
边框：1px纯红；
浮动：左；
宽度：69%；
}

单击此按钮可切换左列的固定位置
固定内容

其他一些内容
宽度正在更改，因为静态对象从其父对象接收其百分比宽度。将对象设置为“固定”后，它将不再处于流动状态并调整大小

您必须自己为导航菜单设置一个大小，并且不要期望元素从父元素获得其宽度

.nav {
    position: fixed;
    width: 20%;
    border: 1px solid green;
    padding: 0px;
    list-style-type:none;
    background:lightblue;
}

解决方法可能是：
左：8px；右：0；宽度：18%。
但这不是最好的解决方案。
您可以使用
width:inherit
。这将使它听父母的话。我测试了它，它在Firefox中工作。
这可能是因为
或
元素上有一些默认的边距或填充。当它是静态的时，它的大小取决于当时
的宽度，但当它更改为
位置：固定时，它的大小取决于视口

因此，删除默认的边距/填充应该可以解决问题（根据我的经验，
body{margin:0；}
可以解决问题），当它固定时更改大小也可以解决问题（比如
width:calc（n%-5px）；
）。
您也可以使用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();
 });

添加
宽度：自动到
位置的元素：固定使其宽度等于其父元素的宽度。
这是一个有趣的挑战。要实现这一点，我们首先应该了解
fixed
的实际功能

理解固定
与
绝对值
不同，
固定值
不会将自身定位在其最接近的相对父项上。相反，
fixed
相对于视口定位自身。视口将始终保持固定状态，这就是为什么您会获得这样的效果

也就是说，无论何时“继承”任何宽度，它都将与视口相对应。因此，当我们试图将目标元素的宽度设置为其父元素的宽度时，这对我们没有好处

了解有关的不同行为的更多信息

快速解决方案
有两种方法可以解决这个问题

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

.parent{
    width: 300px;
}

.parent .fixed_child{
    position: fixed;
    width: 300px;
}

JS
现在有了移动设备，我们实际上没有设置宽度的奢侈，特别是超过
300px的任何设备。使用百分比也不起作用，因为它将相对于视口而不是父元素我们可以使用JS，在本例中，通过jQuery来实现这一点。让我们看一看函数，该函数总是在给定时刻设置参数的宽度：

 function toggleFixed () {
      var parentwidth = $(".parent").width();      
      $(".child").toggleClass("fixed").width(parentwidth);        
  }

css:

查看

动态宽度
这很好，但是当用户仍在页面上时，如果窗口的宽度改变了，会发生什么情况呢？当父级可以调整其宽度时，子级将保持函数设置的宽度我们可以使用
resize（）事件侦听器解决此问题。首先，我们需要将我们创建的函数分为两部分：

function toggleFixed() {
   adjustWidth();
   $(".child").toggleClass("fixed");
 }

 function adjustWidth() {
   var parentwidth = $(".parent").width();
   $(".child").width(parentwidth);
 }

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

$("#fixer").click(
     function() {
       toggleFixed();
     });

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

 $(window).resize(
     function() {
       adjustWidth();
     })

查看

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

结论
我们通过了解
固定的
位置及其局限性来应对这一挑战。与绝对不同，
fixed
仅与视图端口相关，因此无法继承其父级的宽度

为了解决这个问题，我们需要使用一些JS魔法来实现这一点，而jQuery并不需要花很多时间

在某些情况下，我们需要使用不同宽度的缩放设备的动态方法。同样，我们采用了JS方法。
正如有人建议的那样，使用纯javascript（不带jquery）：

const parentElement=document.querySelector（'.parent元素'）；
const fixedElement=document.querySelector（'.fixed元素'）；
window.addEventListener（'load'，changeFixedElementWidth）；
window.addEventListener（'resize'，changeFixedElementWidth）；
函数changeFixedElementWidth（）{
const parentElementWidth=parentElement.getBoundingClientRect（）.width；
fixedElement.style.width=parentElementWidth+'px'；
}
CSS看起来像是在做它被告知要做的事情？也可能是菜单不再是父菜单了？我更新了url，我在测试用例中忘记了一些CSS属性。。改变位置：固定位置：静态，你会看到宽度的变化。是的，这可能是因为菜单不再作为父菜单，我想你可能需要相应地调整。你能更具体一点吗？：）我更新了url，我
 $(window).resize(
     function() {
       adjustWidth();
     })