Div 并排，宽度可变 Div 可滚动答案

【问题标题】：Div's side by side with varied width Div scrollableDiv 并排，宽度可变 Div 可滚动
【发布时间】：2010-01-16 00:46:04
【问题描述】：

我想让两个 div 并排放置，左边一个固定，右边一个填满屏幕的其余部分。但是，当右侧 div 包含超出其可用宽度的内容时，右侧 div 不应低于左侧 div 而是可滚动。即两个Div并排保持并排，右侧Div有滚动条。

在右侧 div 上设置宽度 % 可以显示我所追求的，但右侧 Div 永远不会填充剩余空间，就像您需要将右侧 Div 宽度设置为 100% - leftDiv.width...

这就是我所拥有的。

谢谢

<style type="text/css">
#leftDiv{
    width: 200px;
    float: left;
} 

#rightDiv{
    float: left;
    overflow: auto;
    /* width: 50%; */
}
</style>

<div id="leftDiv">
    Left side bar
</div>
<div id="rightDiv">
    Some_really_long_content_which_should_make_this_Div_scroll
</div>

编辑

我可以使用这样的一些 jQuery 获得我想要的效果，但我更喜欢仅使用 css 的解决方案。

$(window).bind('resize', function () {
    $('#rightDiv').width($(this).width() - 220 );

});

【问题讨论】：

标签： css html

【解决方案1】：

哇，这是一个艰难的过程。大多数网站都有固定宽度以避免此类问题。

我相信以下是您想要的。我已经在 Firefox、IE 和 safari 中对其进行了测试。你必须弄乱高度才能得到完美的 ie。

注意：我不确定这将如何适用于其他文档类型。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>foo</title>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
</head>
<body>

<style type="text/css">
    * { 
        border:none;
        margin:0;
        padding:0;
    }

    #leftDiv {
        float: left;
        width: 200px;
        background-color:lightgreen;
        position:absolute;
        top:0px;
        left:0px;
    }
    #rightDiv {
        width:100%;
        background-color:lightblue;
    }
    #padder {
        padding-left:200px;
    }
    #content {
        width:100%;
        height:100px;
        background-color:lightyellow;
        overflow:auto;
    }
</style>

<div id="leftDiv">
      Left side bar
</div>
<div id="rightDiv">
    <div id="padder">
        <div id="content">
            right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_
        </div>
    </div>
</div>

</body>
</html>

【讨论】：

你可以去掉 float:left on leftDiv btw
太好了，非常感谢。认为它需要一些嵌套的 Div，但这是我所得到的！

【解决方案2】：

你需要给#rightDiv一个margin-left: 200px和width: 100%。

【讨论】：

谢谢，但不太好用。我在主浏览器窗口上有一个滚动条，我想是因为 rightDiv 是 100% + 200px 宽。
边距总是添加到宽度上，而不是减去。使用 css3 可以解决这个问题，但并非所有浏览器都支持 css3。

【解决方案3】：

这样的？

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  <head>
  <style type="text/css">

  * { border:none; margin:0; padding:0;}

  #leftDiv{
      float: left;
      width: 200px;
      background-color:yellow;
  }

  #rightDiv{
      position:absolute;
      left:200px;
      float: left;
      overflow: auto;
      /* width: 50%; */
      background-color:green;
      /*margin-left:202px;*/
      /*width:100%;*/
  }
  </style>
  </head>
  <body>
  <div id="leftDiv">
      Left side bar
  </div>
  <div id="rightDiv">
      Some_really_long_content_which_should_make_this_Div_scroll
      Some_really_long_content_which_should_make_this_Div_scroll
      Some_really_long_content_which_should_make_this_Div_scroll
      Some_really_long_content_which_should_make_this_Div_scroll
      Some_really_long_content_which_should_make_this_Div_scroll
      Some_really_long_content_which_should_make_this_Div_scroll
      Some_really_long_content_which_should_make_this_Div_scroll
      Some_really_long_content_which_should_make_this_Div_scroll
      Some_really_long_content_which_should_make_this_Div_scroll
      Some_really_long_content_which_should_make_this_Div_scroll
      Some_really_long_content_which_should_make_this_Div_scroll
      Some_really_long_content_which_should_make_this_Div_scroll
      Some_really_long_content_which_should_make_this_Div_scroll
      Some_really_long_content_which_should_make_this_Div_scroll
      Some_really_long_content_which_should_make_this_Div_scroll
      Some_really_long_content_which_should_make_this_Div_scroll
      Some_really_long_content_which_should_make_this_Div_scroll
      Some_really_long_content_which_should_make_this_Div_scroll
      Some_really_long_content_which_should_make_this_Div_scroll
      Some_really_long_content_which_should_make_this_Div_scroll
      Some_really_long_content_which_should_make_this_Div_scroll
  </div>
  </body>

【讨论】：

这会将滚动条放在窗口而不是右侧的div上。
哪个有意义，不是吗？ hs 正在显示一些非常牢不可破的大东西，为什么用户看不到呢？我以为你的问题只是右 div 不应该显示在左下方。
啊，是的，我误读了他的问题。右边的 div 应该有滚动条，而不是完整的屏幕。认为问题主要是关于右 div 没有显示在左 div 下方。不过，不要觉得我应该投反对票。