Question

我有一个侧边栏，从位置的中间开始，位置为：absolute。当您向下滚动并点击侧边栏的顶部时，会运行一些js使其位置：固定，因此当您进一步滚动时它将保持在视图中。

问题是，我希望页面的宽度是流畅的，所以我使侧边栏宽度：25％，内容宽度的其余部分：75％。页面的主体宽度为：100％，两侧有一些填充物。

这一直有效，直到侧边栏获得固定的宽度，突然间它伸展开来，现在25％的宽度似乎是从屏幕宽度而不是体宽计算出来的。这是有道理的，但这不是一个理想的结果 - 我希望宽度与你滚动时保持一致。

我该怎么办？ css或js（jquery）解决方案。感谢

Answer 1

您可以做的是将min-width设置为nav和content。在绝对/固定元素中包裹导航。固定将始终以屏幕宽度/高度作为参考，它意味着坚持在这个区域:) 如果设置最小宽度，则需要在比屏幕宽的固定区域中添加滚动到ccontent。

   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; }

一个位置：固定元素的宽度百分比可以从体宽计算出来吗？

1 个答案: