Div бок о бок с различной шириной Div прокручиваемый

Я хочу, чтобы два div были бок о бок, а левый фиксировался, а правый заполнял остальную часть экрана. Однако, когда правый 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); 

});

источник

2010-01-15 Simon Hutton

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

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

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

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

источник

2010-01-15 16:46:04 tybro0103

вы можете избавиться от поплавка: слева налевоDIV btw – tybro0103

Отлично, спасибо большое. Думал, что это потребует некоторого вложенного Div, но это было до тех пор, пока я получил! –

См. Демонстрацию по адресу http://jsfiddle.net/r9G6s/ – opsb

-1

Вы должны дать #rightDiv в margin-left: 200px и width: 100%.

источник

2010-01-15 15:35:19

Спасибо, но не совсем работает. Я получаю полосу прокрутки в главном окне браузера, я думаю, потому что 'rightDiv' составляет 100% + 200 пикселей в ширину. –

Нет rightdiv будет только 100% - 200px. –

Поля всегда добавляются к ширине, а не вычитаются. Есть способ обойти это с помощью css3, но не все браузеры поддерживают css3. – tybro0103

-1

Что-то вроде этого?

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

источник

2010-01-15 16:20:31 Edelcom

Это помещает полосу прокрутки в окно, а не в правый div. – tybro0103

Какой смысл, нет? Hs показывает что-то очень нерушимое большое, почему пользователь не сможет его увидеть? Я думал, что ваш вопрос в том, что правый div не должен отображаться под левым. – Edelcom

Ах да, я неправильно понял его вопрос. Правый div должен иметь полосу прокрутки, а не полный экран. Думал, что речь шла главным образом о том, что правый div не отображается под левым div. Не чувствую, что я заслуживаю проголосовать. – Edelcom

Div бок о бок с различной шириной Div прокручиваемый

ответ

Смежные вопросы