Div бок о бок с различной шириной прокрутки Div - PullRequest
Новая
       10

Div бок о бок с различной шириной прокрутки Div

3 голосов
/ 15 января 2010

Я хочу, чтобы два элемента 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>

EDIT

Я могу получить нужный эффект с помощью некоторого jQuery, подобного этому, но я бы предпочел решение только для css. 

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

});

Ответы [ 3 ]

6 голосов
/ 15 января 2010

Ого, это сложный вопрос. Большинство сайтов имеют фиксированную ширину, чтобы избежать подобных проблем.

Я верю, что вам нужно следующее. Я проверил это в Firefox, т. Е. В Safari. Вам придется возиться с высотой, чтобы получить то, что идеально подходит для т. Е.

Примечание: я не уверен, как это будет работать для других типов документов. 

<!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>
0 голосов
/ 15 января 2010

Как то так? 

  <!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>
0 голосов
/ 15 января 2010

Вам нужно дать #rightDiv a margin-left: 200px и width: 100%.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...