2个灵活的div调整大小并使用jQuery拆分(1/5)

Question

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

header (100%)
____________________________
side | contents
bar  |

该设计是灵活的(也就是当调整侧边栏和内容宽度重新调整时)我需要的侧边栏是大约1的5或30%，其余的由“内容”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的网格系统等框架可以用来实现这一点。如果你使用IE8之前的浏览器，支持开始减弱，但jquerymobile似乎比bootstrap对IE7有更好的支持。有一些技术可以克服它们，在这种情况下，使用CSS将被认为是更纯粹的。

也就是说，一些浏览器可能对边距、边框和宽度有不同的实现，因此您可能无法使用100%的宽度(上面提到的框架在其网格系统中考虑到了这一点)。如果你想修复你的代码，你可以稍微缩减一下宽度(这并不是为所有浏览器量身定做的，也可能不是你想要的)，但我更喜欢@Gaby的答案而不是这样：

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