定位可以溢出视口而不触发滚动条的元素？ [英] Positioning an element that can overflow outside the viewport without triggering a scrollbar?

问题描述

我的内容和正文背景颜色不同，我希望有一个渐变从一个渐变到另一个渐变。只有当内容小于视口时才需要此效果。

示例： http://jsfiddle.net/kEXzs/1/

缩小y轴上的结果视图并注意滚动条因为.footer div溢出而出现。我不希望这种情况发生。内容溢出时，视口只应显示滚动条。这是可能的吗？

我也接受其他可以提供相同效果的建议。 内容div动态调整大小，所以为body设置渐变背景不起作用。

您可以将页脚定位为固定：

 < div class =footerstyle =position：fixed> 
< / div> 
  

（或相应更改CSS）。 这里有一个小提示： http://jsfiddle.net/kEXzs/17/

p>

My content and body background colors are different and I would like to have a gradient to fade from one to the other. This effect is only necessary when the content is smaller than the viewport.

Example: http://jsfiddle.net/kEXzs/1/

Shrink the result view on the y axis and notice how the scroll bar shows up because the .footer div is overflowing. I don't want that to happen. The viewport should only show the scrollbar when the content is overflowing. Is this possible?

I'm also open to other suggestions that would provide the same effect. The content div is resized dynamically so setting a gradient background for body doesn't work.

解决方案

You could position the footer as being fixed:

<div class="footer" style="position: fixed">
</div>

(or change the CSS accordingly).

Here's a fiddle for this: http://jsfiddle.net/kEXzs/17/

这篇关于定位可以溢出视口而不触发滚动条的元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！