当我们将position:fixed应用于元素时，它会占用文档的out of the normal flow，因此它不会尊重它的父元素宽度。
如果将其声明为百分比，是否有办法让它继承父母的宽度？ （下面的工作用例）
let widthis = $('.box').width();
$('.dimensions').text(`width is ${widthis}`);
$('button').on('click', function() {
$('.box').toggleClass('fixed');
let widthis = $('.box').width();
$('.dimensions').text(`width is ${widthis}`);
});.container {
max-width: 500px;
height: 1000px;
}
.box {
background-color: lightgreen;
}
.fixed {
position: fixed;
}
.col-1 {
border: 1px solid red;
float: left;
width: 29%;
}
.col-2 {
border: 1px solid pink;
float: left;
width: 69%;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Click this to toggle position fixed for the left column</button>
<div class="container">
<div class="col-1">
<div class="box">
fixed content<br>
<span class="dimensions"></span>
</div>
</div>
<div class="col-2">
some other content
</div>
</div>
答案 0 :(得分：31)
这是一项有趣的挑战。要解决这个问题，我们首先应该了解fixed实际上做了什么。
与absolute不同，fixed 不会将自己置于最近的亲属父级。相反，fixed 相对于视口定位自己。视口将始终保持固定，这就是您获得效果的原因。
话虽如此，每当你“继承”任何宽度时，它都将与视口相对应。因此，当我们尝试将目标元素的宽度设置为其父级的宽度时，这对我们没有好处。
详细了解position的不同行为。
有两种方法可以解决这个问题。
我们可以使用纯CSS 来解决此问题，但我们需要提前知道宽度。假设其父元素为300px;
.parent{
width: 300px;
}
.parent .fixed_child{
position: fixed;
width: 300px;
}
现在使用移动设备，我们不真的拥有设置宽度的奢侈品，尤其是任何超过300px的东西。使用百分比也不起作用，因为它将相对于视口而不是父元素。 我们可以使用JS ，在这种情况下与jQuery实现此目的。让我们看一下函数，将始终在给定时刻设置paren t的宽度：
function toggleFixed () {
var parentwidth = $(".parent").width();
$(".child").toggleClass("fixed").width(parentwidth);
}
的CSS：
.fixed{
position:fixed;
}
这很好，很花哨，但是当用户还在页面上时，如果窗口宽度发生变化会发生什么？用这个更改父元素？当父级可以调整其宽度时，子级将保持函数设置它的设置宽度。 我们可以使用jQuery's resize() 事件监听器来解决此问题。首先，我们需要将我们创建的函数拆分为两个：
function toggleFixed() {
adjustWidth();
$(".child").toggleClass("fixed");
}
function adjustWidth() {
var parentwidth = $(".parent").width();
$(".child").width(parentwidth);
}
现在我们已将每个部分分开，我们可以单独调用它们，我们将包含切换固定和宽度的原始按钮方法：
$("#fixer").click(
function() {
toggleFixed();
});
现在我们还将resize事件监听器添加到窗口：
$(window).resize(
function() {
adjustWidth();
})
有！现在我们有一个固定元素，当调整窗口大小时，将调整大小。
我们通过了解fixed位置及其局限性来应对这一挑战。与Absolute不同，fixed仅与视口相关，因此无法继承父视图的宽度。
要解决这个问题，我们需要使用一些JS魔法来实现这个目标。
在某些情况下，我们需要一种动态方法，可以扩展不同宽度的设备。再次，我们采用了JS方法。
答案 1 :(得分：12)
您可以使用width:inherit。这将使它听父母。我测试它，它可以在Firefox中使用。
答案 2 :(得分：5)
宽度正在变化，因为静态时的对象从其父级接收其百分比宽度。将对象设置为fixed后，它将不再处于流动状态并调整大小。
你必须自己设置导航菜单的大小，而不要指望元素从父级获得宽度。
.nav {
position: fixed;
width: 20%;
border: 1px solid green;
padding: 0px;
list-style-type:none;
background:lightblue;
}
答案 3 :(得分：4)
您好，您也可以使用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();
});
答案 4 :(得分：2)
正如有人已经建议的那样，使用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';
}
答案 5 :(得分：0)
解决方法可能是：导航的CSS中的left:8px; right:0; width:18%;。
虽然不是最好的解决方案。
答案 6 :(得分：-3)
将width:auto;添加到position:fixed;的元素，使其宽度等于其父元素的宽度。