让绝对定位区域增长
请参阅此页面以供参考：测试页面
我正在设计一个带有侧边栏的网站包含手风琴样式的垂直导航栏。包含此手风琴的侧边栏相对于容纳它的容器是绝对定位的。我这样做是为了让侧边栏保持粘在顶部、底部和侧面。
当您单击产品按钮时，手风琴将远远超出容器，溢出到页脚。如果我将侧边栏向左浮动，它会增长以容纳整个侧边栏，但默认情况下它不会粘在容器的底部。
我需要一个解决方案，允许侧边栏绝对定位，并在手风琴展开时允许增长。有什么想法吗？也许是 Jquery 解决方案？
Please see this page for reference: test page
I am designing a site that has a sidebar that contains an accordion style vertical nav bar. The sidebar which contains this accordion is absolutely positioned, relative to the container that holds it. I did this so the sidebar would stay sticky to the top, bottom, and side.
When you click the products button, the accordion expands well past the container, overflowing into the footer. If I floated the sidebar to the left, it would grow to accommodate the entire sidebar, but it wouldn't be sticky to the bottom of the container by default.
I need a solution that allows the sidebar to be absolutely positioned, and allow growth if the accordion expands. Any Ideas? Jquery solution perhaps?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（5）
我不明白为什么你不能使用浮动。
粘在底部是什么意思？
编辑
因为您使用绝对定位，所以现在可以扩展容器，因为菜单不再在流程中。 （好吧，你可以使用 JavaScript），但我真的没有看到问题。
I don´t see why you can not use float.
What do you mean with sticky to bottom?
EDIT
Because you use absolute positioning there is now way to expand the container, because the menu isn't in the flow anymore. (OK you can use JavaScript), but I really don't see a problem.
虽然问题是如何使绝对定位的区域增长，但答案是如果不使用 javascript 就无法增长。
经过一些研究后，似乎很多人都陷入了同样的境地：“如何让右栏（侧边栏）一直延伸到页面下方？”
答案是使用假柱！
http://www.alistapart.com/articles/fauxcolumns/
Although the question was how can you make an absolutely positioned area grow, the answer is you simply cannot without using javascript.
After some research it seems that many people are stuck in this very same position: "How do you get the right column’s (sidebar) to extend all the way down the page?"
The answer is using Faux Columns!
http://www.alistapart.com/articles/fauxcolumns/
如果您将其向左浮动并绝对定位，它应该会自动展开。
It should expand automatically if you float it left and absolutely position it.
我发现在包含的 div 上设置
overflow:hidden;通常会产生奇迹。既然您告诉内容隐藏，浏览器就会不遗余力地隐藏它（除非您设置了高度或最大高度）。当容器有浮动等时，这通常效果很好。无需添加 div 到clear: Both;等。尝试一下...
编辑：我一直在研究这个，但无法让它在您的网站上运行。您可以直接向左浮动菜单和主区域，然后将容器设置为
overflow: hide;吗？这就是我过去用过的。I have found that setting
overflow: hidden;on the containing div usually works wonders. Since you told the content to hide, the browser goes out of its way to not hide it (unless you have set a height or max-height). This works well in general when a container has floats, etc. No need to add a div toclear: both;, etc.Give this a try...
Edit: I've been playing around with this and I can't get it to work on your site. Can you just float left the menu and main area, then set the container to
overflow: hidden;? That's what I have used in the past.jQuery 解决方案应该可以通过类似这样的方式连接到导航链接的单击侦听器上：
它基本上应该调整栏和容器的大小以包含其内容。您可能想调整几个像素或其他东西，但这就是想法。
编辑：这可能会因为手风琴不会立即展开整个子菜单而变得复杂，可能必须将其放在调整大小循环中的某个位置，或者如果短暂的差异可以接受，则只需在动画结束时执行此操作你。
A jQuery solution should be possible with something like this hooked onto the click listeners for the navigation links:
It should basically resize the bar and container to contain their contents. You may want to adjust by a few pixels or something, but this is the idea.
Edit: This might be complicated by the fact that the accordion doesn't expand the entire submenu at once, may have to put this inside the resizing loop somewhere, or just do it at the end of the animation if that momentary discrepancy is okay with you.