将浮动元素的高度设置为浏览器窗口的100％

时间：2015-01-02 15:09:08

标签： css css3

我有以下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％高度，但它与浏览器窗口的高度不匹配，因此我可以使两个部分都具有100％的浏览器高度窗口而不是身体元素的100％高度？

我是否可以仅使用CSS执行此操作，还是必须使用JavaScript？

更新

不久前我有一个类似的问题： Set height of floated elements to 100% of the browser window

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

5 个答案:

答案 0 :(得分：1)

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

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>

继承人：http://jsfiddle.net/f9usmbkv/5/

答案 1 :(得分：1)

使用表的替代方法是使用jquery：

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

继承人：http://jsfiddle.net/f9usmbkv/6/。 8是抵消身体上的填充物。

答案 2 :(得分：0)

你必须做一个css-reset。元素具有内在的边距和填充。因此你的部分周围的空间。通过重置，您可以从一个干净的平板开始。此外，执行box-sizing将确保计算宽度时考虑到跨浏览器的边距和边框。

然后在正文上设置overflow:hidden，在overflow:auto上设置section。

＆＃13;
＆＃13; 
* {
    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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：0)

我认为你不能按照你的想法去做（不是使用身高：100％属性）。但是有一个名为＆＃34; Faux Columns ＆＃34;的解决方法。这是一种实现你想要的效果的视觉方式 Dan Cederholm撰写的这篇文章here描述了这种技术，可能对您有所帮助。

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

答案 4 :(得分：0)

使用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

相关问题
最新问题