Фиксированная ширина деления слева и ширина жидкости деления справа

Question

Я хочу иметь фиксированную ширину <div> слева и гибкую <div> справа для изменения размера окна. Также , левый <div> является разборным (я использую jQuery, чтобы скрыть его с отрицательным полем), тогда мне нужно право <div>, чтобы иметь полную ширину.

PS: я не могу иметь div 100% ширины внутри контейнера с отступом без горизонтальных прокруток ...

Answer 1

Я хочу иметь фиксированную ширину слева и гибкую справа для изменения размера окна.

float: left только слева div, и добавитьoverflow: hidden вправо div.

См .: http://jsfiddle.net/JsLuG/

Кроме того, левая сторона разборная (я использую jQuery, чтобы скрыть ее с помощьюотрицательное поле), тогда мне нужно право иметь полную ширину.

Это работает с моим методом: http://jsfiddle.net/JsLuG/1/

PS: я не могуиметь 100% ширину в контейнере с отступом без горизонтальных прокруток ...

Это потому, что width: 100% не включает padding.

См .: http://css -tricks.com / 2841-the-css-box-model /

Самый простой способ обойти это - не объявлять width: 100%.Элемент уровня блока по умолчанию принимает значение "полная ширина" (width: auto).

Или добавьте элемент-обертку и поместите в него padding.Или используйте box-sizing: border-box.

Answer 2

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

http://jsfiddle.net/vpKfn/

Answer 3

Это хороший вариант использования postion:fixed;. Приведенный ниже пример поможет вам начать. Вы можете легко создавать разные классы, когда боковая панель скрыта, и просто переключать классы в div, чтобы использовать разные значения позиции.

HTML

<div class="sidebar">side stuff</div>
<div class="main">main content</div>

CSS

.sidebar{
    background-color:#CCC;
    position:fixed;
    left:0;
    top:0;
    bottom:0;
    width:150px;
}

.main{
    background-color:#AAA;
    position:fixed;
    left:150px;
    top:0;
    bottom:0;
    right:0; 
}