滚动浮子
滚动浮子
提问于 2012-12-19 12:37:04
在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 it #to_scroll是为了展示我想要的，它不起作用。#right_al跨越父边界，清除浮点数将增加父节点的大小，这是我不想要的。
jsFiddle链接：http://jsfiddle.net/5ycnw/
我想要的是
- div1 to div5位于父服务器内部的左侧。
- 左边的div决定父div延伸到的最大高度。向右浮动的div有一个子
#to_scroll，当它的内容溢出#main时它会滚动。
我想出的一个解决方案涉及到修复right_al的高度，但是父#main的高度取决于左div上的内容，我只想要一个CSS解决方案。
提前谢谢。
回答 2
Stack Overflow用户
回答已采纳
发布于 2012-12-19 21:12:57
正如我在上面的注释中提到的，当没有给定高度时，W3C规范将不允许滚动容器，因为容器的内部高度将用于定义其总高度。如果使用一些JS代码是一种选择，请查看以下Fiddle：
IT/kf3vD/
下面是我在演示中使用的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>
当文档完全加载时，左侧元素(主内容元素)的高度信息将用于设置侧栏内滚动元素的高度减去显示侧栏标题所需的高度。
重要的部分将是这个简短的jQuery指令：
$(document).ready(function() {
var mainHeight=$('#main-column').height();
var sidebarHeaderHeight=$('#side-bar-header').height();
$('#side-bar-scroller').css('height', mainHeight-sidebarHeaderHeight);
});我只在Chrome中测试了代码，所以您肯定需要进行一些微调:-)
Stack Overflow用户
发布于 2012-12-19 12:41:48
在"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; }在关闭主标记之前，请清除CSS。添加以下内容：
<div style="clear:both"></div>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/13952636
复制相关文章
相似问题
腾讯云开发者
