1

http://jsfiddle.net/UeLMA/1/

的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/

有任何想法吗？

4

5 回答 5

2

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

将此重置添加到您的 CSS：

* {
margin: 0;
padding: 0;
}
于 2013-04-03T16:56:57.510 回答
1

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

这是一个小提琴：

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

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

于 2013-04-03T16:55:15.740 回答
1

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

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

    CSS： html, body, #left, #right { height: 100%; margin:0; }

  2. 要填充页面宽度，只需将两个块元素浮动到左侧并将它们的宽度设置为50%（或等于 100% 的不同比率）

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

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

于 2013-04-03T16:57:03.090 回答
1

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

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()
于 2013-04-03T17:01:52.593 回答
0

无需使用 JQuery。您的代码中的主要问题是 div 默认采用 100% 宽度，因此右侧 div 位于下方，因此只需根据需要为左右 div 提供宽度，添加 height:100%; 到他们每个人并删除 Jquery 代码

于 2013-04-03T16:59:06.963 回答