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解决方案。< / p>

提前致谢。

Answer 1

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

http://jsfiddle.net/Moonbird_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中测试了代码，因此您肯定需要对其进行一些微调： - ）

Answer 2

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

滚动Float

2 个答案: