7

我对 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 的解决方案。

提前致谢。

4

2 回答 2

2

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

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>

​</p>

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

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

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

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

于 2012-12-19T21:12:57.940 回答
0

在“内容”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>
于 2012-12-19T12:41:48.853 回答