Question

我希望有两个div并排，左边一个固定，右边一个填充屏幕的其余部分。但是，当右侧div包含超出其可用宽度的内容时，右侧div不应低于左侧Div但可以滚动。也就是说，两个Div保持并排，右边Div有一个滚动条。

在右侧div上设置宽度％显示我正在追求但正确的Div从不填充剩余空间，就像你需要将正确的Div宽度设置为100％ - leftDiv.width ... < / p>

这就是我所拥有的。

由于

<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 );

});

Answer 1

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

我相信以下是你想要的。我在firefox中测试了它，即和safari。你必须把高度搞得一团糟才能得到那么完美。

注意：我不确定这对其他doctypes有何用处。

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

Answer 2

您需要#rightDiv margin-left: 200px和width: 100%。

Answer 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的并排可变宽度Div可滚动

3 个答案: