将浮动元素的高度设置为浏览器的 100% window

Question

我有以下 HTML 代码：

<html>
  <body>
    <section>
             Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
             Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
             Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
             Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum 
             Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum 
             Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum 
             Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum 
             Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum 
             Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum 
             Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum 
             Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum 
             Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum 
             Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum 
             Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum 
             Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum 
             Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum 
             Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum 
             Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum 
             Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum 
             Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum 
             Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum 
             Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum 
             Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum 
             Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum 
             Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum 
             Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum 
             Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum 
             Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum 
             Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum 
             Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum 
             Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum 
             Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum 
             Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum 
             Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum 
             Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum 
             Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum 
             Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum 
             Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum 
             Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum 
             Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum 
             Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum 
             Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum 
             Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum 
             Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum 
             Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum 
             Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum 
             Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum 
             Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum 
             Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum 
             Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum 
             Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
    </section>
    <section></section>
  </body>
</html>

CSS:

html,body {
  height: 100%;
}
body {
  background: #0f0;
}
body:after {
  content: "";
  display: table;
  clear: both;
}
body > section:first-of-type {
  width: 300px;
  background: #f00;
  float: left;
}
body > section:last-of-type {
  width: 300px;
  height: 100%;
  background: #00f;
  float: right;
}

此外，这是现场示例：http://jsfiddle.net/f9usmbkv/

从示例中可以看出，右侧的部分设置为 100% 高度，但它与浏览器的高度不匹配 window，所以我可以将两个部分都设置为 100%浏览器的高度 window 而不是 body 元素的 100% 高度？

我只能使用 CSS 还是必须使用 JavaScript？

更新：

不久前有人问我类似的问题：

然而，对于这个项目，使用 display:flex 是不可能的，因为我必须支持尚未使用它的浏览器，但看看那个问题，它可能会对你有所帮助。

Answer 1

您必须进行 css 重置。元素具有固有的边距和填充。因此，您的部分周围有 space。通过重置，您可以从头开始。此外，执行 box-sizing 将确保计算宽度时考虑到跨浏览器的边距和边框。

然后在 body 上设置 overflow:hidden，在 sections 上设置 overflow:auto。

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html, body {
    height: 100%;
    overflow: hidden;
}
body {
    background: #0f0;
}
body:after {
    content:"";
    display: table;
    clear: both;
}
body > section:first-of-type {
    width: 300px;
    height: 100%;
    background: #f00;
    float: left;
    overflow: auto;
}
body > section:last-of-type {
    width: 300px;
    height: 100%;
    background: #00f;
    float: right;
    overflow: auto;
}

<section>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum </section>
<section></section>

Answer 2

我认为您无法按照您的想法来做到这一点（不是通过使用 height:100% 属性）。但是有一种称为“Faux Columns”的解决方法，这是一种实现您想要的效果的视觉方式。
这篇文章 here 由 Dan Cederholm 撰写，描述了这种技术，可能对您有所帮助。

通常 - 您在父元素上指定背景图像，然后在 y 轴上重复。这将创建两个高度相同的列的印象。这里的目的是准备正确的图像，知道你的列的宽度。

Answer 3

我不知道这是否是您想要使用的方法，但这种方法有效：使用表格

css:

.table { 
    display: table; 
    width:100%;
}
.table section { 
    display: table-cell; 
    width: 100vw - 600px; 
    padding: 10px; 
}
.table section:nth-child(even) { 
    background: #ccc;
}
.table section:nth-child(odd) { 
    background: #eee;
}

<body>
  <div class="table">
    <section style="background:red; width:300px;">Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum     </section>
    <section></section>
    <section style="background:blue; width:300px;"></section>
  </div>
</body>

这里是 fiddle：http://jsfiddle.net/f9usmbkv/5/

Answer 4

使用表格的替代方法是使用 jquery:

$(document).ready(function(){
    var docH = $(document).height();
    console.log(docH);
    $('.right-col').height(docH-8);
});

这里是 fiddle: http://jsfiddle.net/f9usmbkv/6/ 。 8 是为了抵消 body 上的填充。

Answer 5

使用 Grace Lee 的答案或尝试使用 Flexbox：

body {
    margin: 0
}

.flex-outside {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.flex-inside {
    display: flex;
    flex-direction: row;
    flex-grow: 2;
}

.left {flex: none; background-color: red;}
.center {flex: auto; background-color:green;}
.right {flex: none; background-color: blue;}

演示：JSFiddle

将浮动元素的高度设置为浏览器的 100% window

Set height of floated elements to 100% of the browser window

css