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

Question

当我们将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>

Answer 1

这是一项有趣的挑战。要解决这个问题，我们首先应该了解fixed实际上做了什么。

了解固定

与absolute不同，fixed 不会将自己置于最近的亲属父级。相反，fixed 相对于视口定位自己。视口将始终保持固定，这就是您获得效果的原因。

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

详细了解position的不同行为。

快速解决方案

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

纯CSS

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

.parent{
    width: 300px;
}

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

JS

现在使用移动设备，我们不真的拥有设置宽度的奢侈品，尤其是任何超过300px的东西。使用百分比也不起作用，因为它将相对于视口而不是父元素。 我们可以使用JS ，在这种情况下与jQuery实现此目的。让我们看一下函数，将始终在给定时刻设置paren t的宽度：

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

的CSS：

.fixed{
    position:fixed;
}

在CodePen

中查看

动态宽度

这很好，很花哨，但是当用户还在页面上时，如果窗口宽度发生变化会发生什么？用这个更改父元素？当父级可以调整其宽度时，子级将保持函数设置它的设置宽度。 我们可以使用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();
     })

在CodePen

中查看

有！现在我们有一个固定元素，当调整窗口大小时，将调整大小。

结论

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

要解决这个问题，我们需要使用一些JS魔法来实现这个目标。

在某些情况下，我们需要一种动态方法，可以扩展不同宽度的设备。再次，我们采用了JS方法。

Answer 2

您可以使用width:inherit。这将使它听父母。我测试它，它可以在Firefox中使用。

Answer 3

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

你必须自己设置导航菜单的大小，而不要指望元素从父级获得宽度。

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

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

Answer 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();
 });

Answer 5

正如有人已经建议的那样，使用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';
}

Answer 6

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

Answer 7

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