滚动Float

Question

在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>

该overflow: scroll内部#to_scroll是显示我想要的东西,这是行不通的.该#right_al交叉盘父边界和清除浮动将增加母公司的规模,这是我不想要的.

jsFiddle链接:http://jsfiddle.net/5ycnw/

我想要的是

• div1到div5位于父级内部的左侧.
• 左边的div决定父div延伸到的最大高度.漂浮在右边的div有一个孩子#to_scroll,当它的内容溢出时会滚动#main.

我提出的解决方案涉及修复高度right_al,但父级的高度#main取决于左侧div的内容,我想要一个仅CSS的解决方案.

提前致谢.

Answer 1

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

\n\n

http://jsfiddle.net/Moonbird_IT/kf3vD/

\n\n

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

\n\n

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

\n\n

\xe2\x80\x8b

\n\n

当文档完全加载时，左侧元素（主要内容元素）的高度信息将用于设置侧边栏内滚动元素的高度减去显示侧边栏标题所需的高度。

\n\n

最重要的部分是这个简短的 jQuery 指令：

\n\n

$(document).ready(function() {\n  var mainHeight=$(\'#main-column\').height();    \n  var sidebarHeaderHeight=$(\'#side-bar-header\').height();    \n  $(\'#side-bar-scroller\').css(\'height\', mainHeight-sidebarHeaderHeight);\n});\xe2\x80\x8b\n

\n\n

我只在 Chrome 中测试了代码，所以你肯定需要在那里进行一些微调:-)

\n