如何将两个浮动 div 设置为页面的 100% 高度

Posted 2023-02-25

【中文标题】如何将两个浮动 div 设置为页面的 100% 高度

【英文标题】：How to set two floated divs to be the 100% height of the page

【发布时间】：2013-12-21 15:09:49

【问题描述】：

包装 div 中有两个不同高度的浮动 div。我需要它们都达到身体高度的 100%，即高度相同。还使用了clearfix。但是height:100% 似乎不起作用。如何做到这一点？

Demo

html：

        <div class="wrapper">
            <div class="primary">
                <img src="http://demo1.opentaps.org/images/products/small/gis_computer_glen_rolla.png" />
            </div>
            <div class="secondary">
                <img src="http://demo1.opentaps.org/images/products/small/gis_computer_glen_rolla.png" />
            </div>
            <div class="clearfix">

            </div>
        </div>

CSS：

body 
    min-height: 100vh;
    background-color: green;
    margin: 0;


.wrapper
    background-color: blue;
  height: 100%;


.primary
    float: left;
    width: 80%;
    height: 100%;
    background-color: yellow;


.primary img
    height: 100px;
    width: 100px;


.secondary
    float: right;
    width: 20%;
    background-color: red;
  height: 100%;


.secondary img
    height: 500px;
    width: 100px;


.clearfix
    clear: both;

【问题讨论】：

检查jsbin.com/UzOjUPiL/2这个

【参考方案1】：

您需要做的就是将 100% 的高度添加到 html 和 body 标签，如下所示：

html, body 
   height: 100%;

演示：

http://jsbin.com/EsOfABAL/1/

【讨论】：

如果页面有滚动条，红色和黄色背景被破坏:)

我试过了，但是当其中一列的高度大于视口时，此方法会失败。

【参考方案2】：

如果您想使用 vh 单位（在您的代码中看到），它确实更容易，无需担心“遗产”并且看到您的列停止在窗口的 100% 高度。

如果混合使用 faux-column 和 clear fix 的方法，只需要设置一次 min-height:100vh;在浮动元素上。

必须在包装器中绘制黄色背景，在非浮动元素中绘制红色背景，使用 clearfix 方法拉伸。

body 
  margin: 0;

.wrapper
  background-color: yellow;
  overflow:hidden;

.primary
  float: left;
  width: 80%;  
  min-height:100vh;

.wrapper .primary img
  height: 100px;
  /* width:1000px; */
  width: 100px;


.secondary .overflow
  margin-left:80%;
  background-color: red;

.overflow:after 
  content:'';
  height:0;
  display:block;
  clear:both;

.secondary img
  height: 500px;
  /*height:100px;*/
  width: 100px;

取消注释图像的高度值，以检查页面的行为和绘图，滚动与否。 http://codepen.io/anon/pen/chHtK

希望这有助于您了解 vh（或 vw）单位的使用，对于 faux-column 和 clearfix 方法，这只是对旧方法的提醒:)

享受

【讨论】：

很遗憾，它现在工作正常。我认为这是 codepen 本身的一个小问题。我需要调整输出窗口的大小才能看到它的实际效果。

我想实现这样的布局（dl.dropboxusercontent.com/u/77212526/layout.jpg）。我可以使用假列来做到这一点吗？

我相信你可以，使用背景图像作为图像或线性渐变，（无需遗憾，很好:)）

【参考方案3】：

html 元素也需要 100% - 试试这个：

html  height: 100%; 
body 
    height: 100%;
    background-color: green;
    margin: 0;