从无到位置时，如何防止 div 改变宽度：固定？答案

【问题标题】：How do i prevent div from changing width when going from nothing to position:fixed?从无到位置时，如何防止 div 改变宽度：固定？
【发布时间】：2014-07-23 21:41:04
【问题描述】：

我用过这个代码：http://andrewhenderson.me/tutorial/jquery-sticky-sidebar/

让我的侧边栏保持粘性。

但是，一旦浏览器的顶部碰到侧边栏的顶部并且它的位置变得固定，侧边栏的宽度就会改变。

这是我的容器和侧边栏的 CSS：

#content-wrap {
height:auto;
min-height:100%;
width:80%;
background:#fff;
display:block;
margin:0 auto;
}

#content {
min-height:100%;
padding-top:5%;
padding-bottom:5%;
height:auto;
margin:0 auto;
overflow:auto;
}

.sidebar {
width:25%;
background: #333;
float:left;
display:inline-block;
height:250px;
color:white;
overflow:visible;
max-width:277px;
}

谁能告诉我如何解决这个问题？

jsfiddle：http://jsfiddle.net/SeanKendle/GdLw8/1/

注意：宽度必须以 % 为单位。

【问题讨论】：

你能在jsfiddle.net中设置一个例子吗？还包括您的 HTML

标签： jquery css position fixed sidebar

【解决方案1】：

如果您希望页面保持相同的宽度，您可以在侧边栏 div 周围放置另一个 div，设置为 25% 宽度（基本上与 .sidebar 相同的样式）。当侧边栏变为fixed 并保持该空间直到它“掉落”时返回到relative 定位时，这将保持不变。

【讨论】：

好主意。不过我只是试了一下，还是不行。
我已经更新了您的小提琴，您需要在左侧下拉菜单中选择 jQuery。我还使内容保持 div 2000px 高以强制滚动条，以便您可以正确测试。稍后我可以对此进行更多研究，但首先，您的内容 div 为 80%。一旦侧边栏将fixed 发送到窗口，它将变为 100%（文档宽度）的 25%，而不是 80%（内容 div）的 25%。 jsfiddle.net/SeanKendle/GdLw8/1
啊，好吧，我对 jsfiddle 很陌生。这让我对这个问题有了更好的理解，所以谢谢你。根据您的说法，侧边栏周围的新 div 不会有帮助，因为与完整文档宽度相比，它仍然是 25%，而不是 80% 的 25%。
如果您坚持保持百分比宽度，即使它位于 fixed 位置，您也可以在为其分配固定位置的同时，更改百分比以匹配新的页面宽度的百分比。因此，如果它是 80% 的 25%，请计算一下：80% 的 25% = 100% 的 20%。正确的？不过，仍然不确定这就是您要处理的方式。如果您可以在将自身固定到顶部后设置宽度，则可以在最后一秒将 CSS 宽度设置为事物的 outerWidth()。
还有一件事，我在我的 all 样式表的顶部添加了*, *:before, *:after { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }。这使得填充不会添加到宽度的外部，而是被推送到div的内部。这样你就可以有填充，并且你的宽度加起来仍然是 100%。不知道你以前是否见过。

【解决方案2】：

如前所述，您可以将元素包裹在具有相同尺寸的固定定位元素周围。

var div = $('<div>', {
    width : $('#sourceElm').width(),
});

$('#sourceElm').wrap(div);

【讨论】：