当使用position:fixed时是否可以保持父元素的宽度？

当我们申请时position:fixed到一个元素，它被采取脱离正常流动 http://quirksmode.org/css/css2/position.html#link7文档的宽度，因此它不尊重其父元素的宽度。 有没有办法让它继承父级的宽度如果这是以百分比形式声明的？ （下面的工作用例）

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>

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

了解固定

Unlike absolute, fixed 不将自己定位于其最近的亲属父母。反而，fixed 相对于视口定位自身。视口将始终保持固定，这就是为什么您会得到这样的效果。

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

了解有关不同行为的更多信息position https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/.

快速解决方案

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

Pure CSS

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

.parent{
    width: 300px;
}

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

JS

现在与移动设备, we don't really have拥有的奢侈设置宽度，尤其是任何超过300px。使用百分比也不起作用，因为它将相对于视口而不是父元素。我们可以使用JS， 在这种情况下使用 jQuery 来实现这一点。让我们看一下function that 将始终设置父级的宽度t 在给定时刻：

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

css:

.fixed{
    position:fixed;
}

View in CodePen http://codepen.io/Philll_t/pen/XMVYEa

动态宽度

这很好，但会发生什么如果窗口的宽度改变当用户仍在页面上时，用这个更改父元素？虽然父级可以调整其宽度，但子级将保持函数设置的宽度。我们可以用以下方法解决这个问题jQuery's https://api.jquery.com/resize/ resize()事件监听器。首先，我们需要将创建的函数分成两个：

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

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

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

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

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

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

View in CodePen http://codepen.io/Philll_t/pen/dvJKqQ

那里！现在我们有一个固定元素，当窗口大小调整时，它的大小也会调整。

结论

我们通过理解来应对这一挑战fixed的地位及其局限性。与绝对不同，fixed仅与视口相关，因此不能继承其父级的宽度。

为了解决这个问题，我们需要使用一些 JS 魔法来实现这一点，这对于 jQuery 来说并不需要太多。

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