I have some content that is wrapped by a div that has overflow set to scroll. Inside that div I have a rows of bootstrap drop down buttons. When you get to the drop down button closest to the bottom edge of the div the dropdown area is hidden by the div scroll bar.

Is there a way to have that dropdown show above the scrollbar? Thanks.

UPDATE: I've added a very simple Fiddle to show what is currently happening

CSS:

div.container
{
    height: 200px;
    overflow: auto;
}

table#fiddleTable th
{
    white-space: nowrap;
}

http://jsfiddle.net/Gnex/8GAc3/

---

I was trying to solve the same thing, this works for me:

$(".dropdown-toggle").click (e) ->
menu = $(this).next(".dropdown-menu")
menuPositionY = e.clientY + menu.height() + 180
#check if dropdown exceeds the Y coordinate of viewport
if $(window).height() < menuPositionY
  menu.css
    top: "auto"
    bottom: "100%"
else
  menu.css
    bottom: "auto"
    top: "100%"

Check the jsfiddle updated: http://jsfiddle.net/8GAc3/6/

---

You can use CSS to re-position the dropdown menu..

.dropdown-menu{
    left:40px;
    top:-10px;
}

Bootply

链接地址: http://www.djcxy.com/p/87826.html

上一篇: 将包含多列元素的div容器展开为列宽

下一篇: Div隐藏在包含带滚动条的div滚动条的下方：滚动设置