⽗级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相对于视⼝定位⾃⾝。 视⼝将始终保持固定，这就是为什么获得效果的原因。
话虽如此，只要您“继承”任何宽度，它将对应于视⼝。 因此，当我们尝试将⽬标元素的宽度设置为其⽗元素的宽度时，这对我们没有好处。
了解更多有关头⼨⾏为的信息。
快速解决⽅案
有两种⽅法可以解决此问题。
jquery是什么有什么作用纯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;
}
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 = BoundingClientRect().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

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。