Jquery 试着让两个div块挨着坐，填满页面

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>

唯一的问题是：它不起作用。以下是JSFIDLE：

---

有什么想法吗？

您的两个分区没有占据整个窗口，因此第二个分区的宽度与第一个分区的宽度不匹配。将第二个宽度更改为$'right'。parent.width-$'left'。outerWidth和它一起工作

这是一把小提琴：

---

我所做的是使用.parent选择器而不是窗口，以确保我调整div大小的目的是它们实际适合的对象。我相信它们适合一个body元素，该元素有一些边距或填充，将其与窗口隔开。

您的两个div没有占据整个窗口，因此第二个div的宽度与第一个div的宽度不匹配。将第二个宽度更改为$'right'。parent.width-$'left'。outerWidth和它一起工作

这是一把小提琴：

我所做的是使用.parent选择器而不是窗口，以确保我调整div大小的目的是它们实际适合的对象。我相信它们适合于一个主体元素，该元素有一些边距或填充物将其与窗口隔开。

工作版本：

将此重置添加到CSS：

* {
margin: 0;
padding: 0;
}

工作版本：

将此重置添加到CSS：

* {
margin: 0;
padding: 0;
}

---

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

要实现100%高度，您希望100%高度的图元的所有父图元也必须设置为100%高度

CSS:html，正文，左，右{高度：100%；边距：0；}

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

CSS:left，right{float:left；width:50%；}

您可以在此处看到工作示例：

---

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

要实现100%高度，您希望100%高度的图元的所有父图元也必须设置为100%高度

CSS:html，正文，左，右{高度：100%；边距：0；}

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

CSS:left，right{float:left；width:50%；}

您可以在此处看到工作示例：

---

不需要使用JQuery。代码中的主要问题是div默认为100%宽度，因此右div位于下面，因此只需根据需要为左div和右div指定宽度，添加高度：100%；对它们中的每一个进行查询并删除Jquery代码

，则无需使用Jquery。代码中的主要问题是div默认为100%宽度，因此右div位于下面，因此只需根据需要为左div和右div指定宽度，添加高度：100%；要删除其中的每一个并删除Jquery代码，您必须考虑正文周围的填充和边距

CSS:

并将“外套宽度”更改为“宽度”：

---

你必须考虑身体周围的填充物和边距

CSS:

并将“外套宽度”更改为“宽度”：

---

当然，如果调整窗口大小，宽度不会更新，效果也会中断。是否值得添加一个检查窗口大小的操作？有很多方法可以绕过它，其中之一就是添加一个调整大小事件。如果已经在使用jQuery，那么添加一个调整大小事件将非常容易，因此这可能是最好的方法。当然，如果调整窗口大小，宽度不会得到更新，效果也会中断。是否值得添加一个检查窗口大小的操作？有很多方法可以绕过它，其中之一就是添加一个调整大小事件。如果已经在使用jQuery，那么添加一个调整大小事件将非常容易，因此这可能是最好的方法。我正在执行display:inline块，以便left只与其中的文本一样大。我不希望它是一个固定的百分比。高度：100%位很酷，但根据我刚才说的，我认为我仍然需要jquery来做宽度？看见我尝试了宽度：100%在右边也没有用。如果你只浮动左边的部分，你不需要为可变宽度编写脚本。我在做display:inline块，这样左边的大小就和里面的文本一样大。我不希望它是一个固定的百分比。高度：100%位很酷，但根据我刚才说的，我认为我仍然需要jquery来做宽度？看见我尝试了宽度：100%在右边也没有用。如果你只浮动左边的部分，你不需要为可变宽度编写脚本。

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

$('#left').width()