css – 当应用position:fixed时,是否可以保留父元素的宽度?

前端之家收集整理的这篇文章主要介绍了css – 当应用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>

解决方法

可以使用width:inherit。这将使它听父母。我测试它,它在Firefox中工作。
原文链接:https://www.f2er.com/css/219696.html

猜你在找的CSS相关文章