2 гибкие дивы размер и раскол (1/5) с JQuery

Question

У меня есть приложение, где дизайн:

header (100%) 
____________________________ 
side | contents 
bar | 

Конструкция является гибкой (иначе при изменении размеров боковой панели и содержимое ширины подрегулировать) мне нужно боковой панели, чтобы быть около 1 из 5 или 30%, а остальные заполнены «содержание» ДИВ

Я использую JQuery, но я застрял с расчетом,

layoutWidth = $(window).width(); 
sidebarWidth = layoutWidth/5; 
contentsWidth = ...so how can I find the remainder of the division? 

$('.sidebar').width(sidebarWidth); 
$('.contents').width(contentsWidth); 
$('.layout-content, .sidebar, .contents').height(layoutHeight); 

Оба divs - это поплавки.

Пробный: содержаниеWidth = расположениеWidth - sidebarWidth;

, но не работает ...

Я не хочу, чтобы сделать это с помощью CSS, поскольку он не соответствует по старым/мобильным браузерам и, кроме всего кода приложения в JQuery.

Answer 1

Нет необходимости в JavaScript .. Вы можете сделать это только с помощью CSS (только один плавающий элемент)

.header{width:100%;} 
.sidebar{width:30%;float:left} 
.content{margin-left:30%;} 

Демо наhttp://jsfiddle.net/WFH3z/1/

Answer 2

рамочные, такие как самозагрузки (в getbootstrap.com) или сетчатые системы jquerymobile для этого. Если у вас есть браузеры до IE 8, поддержка начинает ослабевать, но jquerymobile, похоже, имеет лучшую поддержку IE 7, чем бутстрап. Существуют методы их преодоления, и в этом случае использование CSS будет считаться более чистым.

При этом некоторые браузеры могут иметь различную реализацию таких вещей, как поля, границы и ширины, поэтому вы не сможете использовать 100% ширины (что-то, что упомянутые выше рамки учитывают в их сетчатых системах). Если вы хотите, чтобы исправить свой код, вы можете масштабировать назад на ширину немного (это не приспособлен для всех браузеров и не может быть то, что вы хотите), но я предпочитаю @ ответ Габи по этому поводу:

var layoutWidth = $(window).width(); 
$('.sidebar').width(layoutWidth * .19); 
$('.contents').width(layoutWidth * .79);