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

The 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>

I want #right to fill the rest of the screen that #left isn't using. To achieve this I'm using jquery:

我希望#right能够填充#left没有使用的屏幕的其余部分。要实现这一点,我使用jquery:

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

Only problem: it isn't working. Here's the jsfiddle: http://jsfiddle.net/UeLMA/1/

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

Any ideas?

5 个解决方案

#1

Working version: http://jsfiddle.net/UeLMA/4/

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

add this reset to your CSS:

将此重置添加到CSS:

* {
margin: 0;
padding: 0;
}

#2

The two divs you have don't take up the entire window, so the second div is getting a width that doesn't fit next to the first one. Change the second width to $('#right').parent().width() - $('#left').outerWidth() and it works.

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

Here's a fiddle:

这是一个小提琴:

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

What I'm doing is using the .parent() selector instead of the window to make sure that the thing I'm sizing the divs for is what they're actually fitting into. I believe that they fit into a body element that has some margin or padding setting it off from the window.

我正在做的是使用.parent()选择器而不是窗口来确保我正在调整div的大小是他们实际适合的东西。我相信它们适合于一个有一些边缘或衬垫的身体元素,可以将它从窗口中移开。

#3

You don't need jQuery to achieve this. Just a few basic CSS principles.

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

To achieve 100% height, ALL parents of the element you want 100% in height must also be set at 100% height.

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

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

CSS:html,body,#left,#right {height:100%;余量:0; }
To fill the page width, just float both block elements to the left and set their width to 50% (or a different ratio equaling 100%)

要填充页面宽度,只需将两个块元素向左浮动并将其宽度设置为50%(或不同的比率等于100%)

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

CSS:#left,#right {float:left;宽度:50%; }

You can see the working example here: http://jsfiddle.net/UeLMA/2/

你可以在这里看到工作示例:http://jsfiddle.net/UeLMA/2/

#4

You have to account for the padding and margin around the body.

你必须考虑到身体周围的填充和边缘。

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

CSS:

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

And change outerWidth() to width():

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

$('#left').width()

#5

There is no need to use JQuery. The main problem in your code is div takes 100% width as default so the right div comes below so just give width to both left and right div as needed, add height:100%; to each of them and remove Jquery code

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

#1