当我们应用位置:固定到一个元素,它取为文档的
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>