有百分比宽度的位置固定元件可以从体宽计算吗?

Can a position:fixed element with percentage width be calculated from body width?

本文关键字：计算 百分比 位置      更新时间：2023-09-26

我有一个侧边栏，从页面的中间位置开始，位置:absolute。当你向下滚动并击中侧边栏的顶部时，一些js运行使其position:固定，因此当你继续滚动时，它将保持在视图中。

问题是，我想让页面的宽度是流畅的，所以我把侧边栏的宽度设为25%，其余的内容宽度设为75%。页面主体的宽度为:100%，两边有一些填充。

这工作，直到侧边栏得到一个固定的宽度，突然它伸展，现在25%的宽度似乎是从屏幕宽度计算而不是身体宽度。这是有道理的，但它不是一个理想的结果-我希望宽度保持相同，你滚动

我能做什么?CSS或js (jquery)解决方案。由于

你可以做的是设置最小宽度为nav和内容。在绝对/固定元素中换行导航。固定将始终采取屏幕宽度/高度作为参考，它的意思是坚持在这个区域:)如果你设置了最小宽度，你需要在比屏幕宽的固定区域为内容添加滚动条。

http://jsfiddle.net/GCyrillus/GfSM6/

   nav, section {
        width:80%;
        margin:auto; } html, body {
        height:100%;
        margin:0; } section {
        min-height:100%;
        background:#333;
        color:#def;
        padding-top:4em;
        box-sizing:border-box; }
    #posabsfxd {
        position:fixed;
        left:0;
        right:0;
        top:2em;
        text-align:center; } nav {
        background:tomato; } a {
        color:gold; }
相关文章：