不同高度的绝对定位

我有一个固定在窗口左边的侧边栏，并且有一些滚动内容与窗口底部对齐。通常情况下，我可以将滚动内容的容器top属性设置为它上面的内容的高度，并且一切看起来都不错。不同高度的绝对定位

下面是我正在谈论的一个例子。和more concrete example

#sidebar { 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; 
} 

/* and inside sidebar */ 
#header { 
    /* my question is, how do I achieve this effect when this height is 'auto' */ 
    height: 100px; 
} 

#scrollable-content { 
    top: 100px; 
    overflow-y: scroll; 
}

当滚动内容上面的内容没有一个固定的高度，我可以达到同样的效果？我需要引入JavaScript吗？我该如何修复this fiddle以便我总能看到滚动内容的底部？

来源

2013-07-29 jdgilday

是否有你需要＃滚动的内容和的#header是位什么特别的原因：绝对？ –

我需要将此侧边栏固定到屏幕的边缘，并且在主内容可以滚动时不会比窗口高。我需要Gmail的聊天功能 - 联系人列表在左侧滚动，而其上方的内容（标签）可能高度变化 – jdgilday

如果浏览器支持不是问题，那么也许看看flexbox。如果是这样，那么我认为JavaScript是唯一的出路 –

您可以添加JavaScript的几行（使用jQuery）找到滚动区域的高度：

// find the scrollable height 
var scroll_height = $(window).height() - $('#header').height(); 

// set the height of the scrollable div 
$('#scrollable-container').css('height', scroll_height + 'px');

然后做点击功能在同一隐藏/显示后，使新的头高度用来

http://jsfiddle.net/94E4Z/2/

来源

2013-07-29 04:04:22 Beno

不同高度的绝对定位

回答

相关问题