2个灵活的div使用jQuery调整大小和拆分（1/5）

Question

我有一个应用程序，其中的设计是：

header (100%)
____________________________
side | contents
bar  |

设计灵活（又称调整边栏大小和重新调整内容宽度时），我需要将边栏设为5或30％的1左右，其余部分由“内容” div填充

我使用的是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 );

两个div都是浮点数。

尝试过：contentsWidth = layoutWidth-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

诸如bootstrap（getbootstrap.com）或jquerymobile的网格系统之类的框架可用于执行此操作。 如果您使用的是IE 8之前的浏览器，则支持开始减弱，但jquerymobile似乎比引导更好地支持IE 7。 有一些技术可以克服它们，在这种情况下，使用CSS被认为是更纯粹的方法。

也就是说，某些浏览器对边距，边框和宽度的实现方式可能有所不同，因此您可能无法使用宽度的100％（上述框架在其网格系统中已考虑在内）。 如果您想修复代码，则可以在宽度上略微缩小（这并非为所有浏览器量身定做，可能不是您想要的），但是我更喜欢@Gaby的回答：

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