可变高度滚动div，相对于可变高度兄弟位置定位 [英] variable height scrolling div, positioned relative to variable height sibling

问题描述

最近我提出这个问题：溢出（滚动） - 100％容器高度关于如何实现具有可变高度的垂直滚动div。

一个非常有用的用户提供了使用绝对定位和高度的解决方案：100％，其中：http://jsfiddle.net/TUwej/2/ 。在这个小提琴中，您可以看到基本的所需行为 - 滚动div将填充主容器的高度，由#main元素中的内容确定。

i修改这个有点和使用顶：0 bottom：0，而不是height：100％，以适应可滚动区域上面的元素。修改后的版本可以在这里看到： http://jsfiddle.net/N6muv/3/ （我意识到有一点额外的标记和类定义为空，并且一个相邻的兄弟组合器出现冗余 - 这些是实际结构的残骸）

一切都很好，除了我不得不为滚动div提供一个固定的顶部坐标（注意顶部：'.sidebar-list'选择器的120px声明）。我想这是相对于它上面的'.sidebar-options'元素，所以上面的选项容器可以有任何数量的选项，可滚动的div将适当地定位。使用固定坐标，如果添加或删除任何选项，重叠发生或不必要的空间发展 - 我想避免这一点。应该出现的选项的确切数量在视图之间不同。

我曾想过将滚动div包装在相对定位的容器中，但这样做会与底部产生冲突： 0不再指示主'.wrapper'容器的高度（它应该做）。类似地，使用height：100％将使用'.wrapper'容器的计算高度，因此可滚动div将扩展到'.wrapper'的边界之外。

有没有办法保持第二个小提琴显示的功能，但可滚动div的顶部相对于选项div的底部（这将是可变的高度）？

预先感谢任何建议。

编辑：SO问我是否想开始一个赏金，所以我做了（第一次） - 希望100点不被认为太低。仍然在寻找一个没有脚本，纯css解决方案，不涉及固定坐标或y轴的维度（宽度和左分配都可以）。 thx

解决方案

UPDATE：

导入JQuery：

< script type =text / javascriptsrc =http://ajax.googleapis.com/ajax/libs /jquery/1.4.2/jquery.min.js\"></script>

新演示：
< a href =http://jsfiddle.net/Mutant_Tractor/N6muv/28/ =nofollow> http://jsfiddle.net/Mutant_Tractor/N6muv/28/

在页面中添加这个漂亮的小JQuery脚本：

  var contentColHeight = $ '）。高度（）; 
 var optionColHeight = $（'。sidebar-options'）。height（）; 
 var newHeight = contentColHeight  -  optionColHeight; 
 $（'。sidebar-list'）。height（newHeight）; 
  
 
 
 
 
 
 
 旧 p> 
 
 
如何满足您的需求？ 
  http://jsfiddle.net/Mutant_Tractor/N6muv/4/   p> 
 
 
我改变了 position：absolute; 到 position：relative 添加了一个静态 height：190px 以及添加 background：pink;  
 
 
 
您可以尝试从上面的列表中添加和删除选项来演示此功能。 
 
 
  .sidebar-content {
 position：absolute; 
 top：0; 
 bottom：0; 
 left：0; 
 right：0; 
 background：pink; 
} 
  
 
recently i asked this question: overflow (scroll) - 100% container height about how to achieve a vertically scrolling div with variable height.

a very helpful user provided a solution using absolute positioning and height:100%, here: http://jsfiddle.net/TUwej/2/.  in this fiddle, you can see the basic desired behavior - the scrolling div will fill the height of the main container as is determined by the content in the '#main' element.

i modified this somewhat and used top:0 bottom:0 instead of height:100% to accommodate an element above the scrollable area.  the modified version can be seen here: http://jsfiddle.net/N6muv/3/ (i realize there is a little extra markup and class definitions that are empty, and an adjacent sibling combinator that appears redundant - these are vestiges of the actual structure)

everything is fine, except that i had to supply a fixed top coordinate for the scrolling div (note the top:120px declaration for the '.sidebar-list' selector).  i'd like this to be relative to the '.sidebar-options' element above it, so that the options container above can have any number of options and the scrollable div will position itself appropriately.  using fixed coordinates, if any options are added or removed, either overlap occurs or unnecessary space develops - i'd like to avoid this.  the exact number of options that should appear varies between views.

i had thought to wrap the scrolling div in a relatively positioned container, but doing that creates a conflict with bottom:0 no longer indicating the height of the main '.wrapper' container (which it should do).  similarly, using height:100% will use the computed height of the '.wrapper' container so the scrollable div will extend beyond the boundary of the '.wrapper'.

is there a way to keep the functionality shown in the second fiddle, but with the top of the scrollable div relative to the bottom of the options div (which will be of variable height)?

thanks in advance for any suggestions.

EDIT: S.O. asked if i wanted to start a bounty, so i did (first time) - hopefully 100 pts isn't considered too low.  still looking for a no-script, pure-css solution that doesn't involve fixed coordinates or dimensions for the y-axis (width and left assignments are OK).  thx
解决方案
UPDATE:

Import JQuery:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

New Demo:
http://jsfiddle.net/Mutant_Tractor/N6muv/28/

Add this nice little JQuery script to your page:
var contentColHeight = $('.content').height();
var optionColHeight = $('.sidebar-options').height();
var newHeight = contentColHeight - optionColHeight;
$('.sidebar-list').height(newHeight);




OLD

How does this suit your needs?
http://jsfiddle.net/Mutant_Tractor/N6muv/4/

I changed position:absolute; to position:relative and added a static height:190px as well as adding background:pink; (so the bg always looks right)

You can try adding and removing Options from the list above to demo this.

Full code:
.sidebar-content {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background : pink;
}


                        
这篇关于可变高度滚动div，相对于可变高度兄弟位置定位的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！