Html 滚动浮动

我在HTML/CSS方面非常缺乏经验，所以请帮助我

我有下面的布局

<style>
#main {background-color: red; width: 30%;}
#right_al{float: right;}
#to_scroll{overflow: scroll;}
</style>

<div id='main'>
    <div id='right_al'>
        CONTENT#foo
        <div id='to_scroll'>
        ZZZ<br />ZZZ<br />ZZZ<br />ZZZ<br />ZZZ<br />
        ZZZ<br />ZZZ<br />ZZZ<br />
        </div>
    </div>
    <div id='div1'>CONTENT #1</div>
    <div id='div2'>CONTENT #2</div>
    <div id='div3'>CONTENT #3</div>
    <div id='div4'>CONTENT #4</div>
    <div id='div5'>CONTENT #5</div>
</div>

#主{背景色：红色；宽度：30%；}
#右{float:right；}
#滚动{溢出：滚动；}
内容#foo
ZZZ
ZZZ
ZZZ
ZZZ
ZZZ

ZZZ
ZZZ
ZZZ

内容#1
内容#2
内容#3
内容#4
内容#5

溢出：滚动
内部的
#至_滚动
是为了显示我想要的内容，它不起作用。
#right_al
穿过父级边界，清除浮动将增加父级的大小，这是我不希望看到的

JSIDLE链接：

我想要的是


div1到div5位于父对象的左侧
左侧的div决定父div延伸到的最大高度。浮动到右侧的div有一个子
#to_scroll
，当其内容溢出
#main
时会滚动

我提出的一个解决方案涉及固定
右侧的高度，但父级
#main
的高度取决于左侧div上的内容，我想要一个仅CSS的解决方案

提前感谢。
在“content”div周围放一个包装，然后给它一个左浮动

<div id="content-container">
    <div id='div1'>CONTENT #1</div>
    <div id='div2'>CONTENT #2</div>
    <div id='div3'>CONTENT #3</div>
    <div id='div4'>CONTENT #4</div>
    <div id='div5'>CONTENT #5</div>
</div>


// CSS

#content-container { float:left; }
#main { height:auto; }


内容#1
内容#2
内容#3
内容#4
内容#5
//CSS
#内容容器{float:left；}
#主{高度：自动；}

在关闭主标记之前，请先清除CSS。添加以下内容：

<div style="clear:both"></div>

正如我在上面的评论中提到的，W3C规范不允许在没有给出高度的情况下滚动容器，因为容器的内部高度将用于定义其总高度。如果使用一点JS代码是一种选择，请查看以下内容：


以下是我在演示中使用的HTML结构：

<div id="main">
<div id="main-column">...</div>
<div id="side-bar">
  <div id="side-bar-header">
  Sidebar Header
  </div>
  <div id="side-bar-scroller">
      <ul>
          <li>Option 1</li>
          <li>Option 2</li>
          <li>Option 3</li>        
          <li>Option 4</li>
          <li>Option 5</li>
          <li>Option 6</li>                
          <li>Option 7</li>
          <li>Option 8</li>
          <li>Option 9</li>  
          <li>Option 10</li>
          <li>Option 11</li>
          <li>Option 12</li>               
      </ul>
  </div>

</div>

我只在Chrome上测试了代码，所以你肯定需要在那里进行一些微调：-）
你可以在div到5的周围放置一个包装div，然后向左浮动。@SvenBieder但是我希望div1到div5可以拉伸父级
\main
的高度，而不是我浮动它们。你有JSFIDLE吗？@starbeamrainbowlabs更新了这个问题使用链接。只想确保我的理解正确：您希望有正确的元素#right#与#main具有相同的高度？使用“float:right”已经从文档流中删除了元素，因此此解决方案将无法工作。将尝试显示另一个不带浮动元素的解决方案。但是，父级
#main
不会获得代码的高度。添加一个明确的选项：两者都有。这里有一个解释：现在
#main
扩展以适应我想要滚动的容器和div，与我原来的代码+清除右浮动相同。顺便说一句，为了避免混淆，将问题中的
left_al
改为
right_al
。
$(document).ready(function() {
  var mainHeight=$('#main-column').height();    
  var sidebarHeaderHeight=$('#side-bar-header').height();    
  $('#side-bar-scroller').css('height', mainHeight-sidebarHeaderHeight);
});​