Question

HTML：

<div id="left" style="background: red; display: inline-block; float: left">
    aaaa<br />
    aaaaa
</div>
<div id="right" style="background: yellow; float: left"></div>

我希望#right能够填充#left未使用的屏幕的其余部分。要实现这一点，我正在使用jquery：

$('#left').height($(window).height());
$('#right').height($(window).height());
$('#right').width($(window).width() - $('#left').outerWidth());

唯一的问题：它不起作用。这是jsfiddle：http://jsfiddle.net/UeLMA/1/

有什么想法吗？

Answer 1

工作版本： http://jsfiddle.net/UeLMA/4/

将此重置添加到您的CSS：

* {
margin: 0;
padding: 0;
}

Answer 2

你没有占用整个窗口的两个div，所以第二个div的宽度不适合第一个。将第二个宽度更改为$('#right').parent().width() - $('#left').outerWidth()，它可以正常工作。

这是一个小提琴：

http://jsfiddle.net/UeLMA/5/

我正在做的是使用.parent()选择器而不是窗口来确保我正在调整div的内容是他们实际适合的内容。我相信它们适合body元素，它有一些边距或填充从窗口中设置它。

Answer 3

你不需要jQuery来实现这一点。只是一些基本的CSS原则。

要达到100％的高度，您想要100％高度的元素的所有父元素也必须设置为100％高度。

CSS： html, body, #left, #right { height: 100%; margin:0; }
要填充页面宽度，只需将两个块元素向左浮动并将其宽度设置为50%（或不同的比率等于100％）

CSS： #left, #right { float: left; width: 50%; }

您可以在此处查看工作示例： http://jsfiddle.net/UeLMA/2/

Answer 4

您必须考虑身体周围的填充和边距。

http://jsfiddle.net/UeLMA/6/

CSS：

#left { background: red; display: inline-block; float: left }
#right { background: yellow; float: left; }
body {padding: 0; margin: 0;}

并将outerWidth()更改为width()：

$('#left').width()

Answer 5

没有必要使用JQuery。你的代码中的主要问题是div默认为100％宽度，所以正确的div位于下方，所以只需根据需要给左右div提供宽度，添加高度：100％;到他们每个人并删除Jquery代码

试图让两个div块彼此相邻并填充页面

5 个答案: