使用“float:right”或 'float:left' 时，将 css 高度设置为 100% 不起作用

Question

我正在做一个网络项目，需要设计一个 HTML 页面。我想将元素的高度设置为百分比，以使其更适合页面。

当我在 CSS 中使用 float 并设置：

body, html{
    height: 100%; 
    width: 100%
}

它不适用于身高。我通过更改 position 而不是使用 float 来临时修复它。我想知道为什么它不起作用。谁能帮帮我？

这是错误代码：

html, body{
    width: 100%;
    height: 100%;
    margin: 0;
}

#test1, #test2{
    display:inline-block;
    height: 100%;
    width:30%;
}
#test1{
    float:left;
    background: #111111;
}
#test2{
    float:right;
    background: #009A61;
}

#test3{
    display:inline-block;
    height: 100%;
    width:40%;
    background: cornsilk;
}

<!doctype html>
  <html>
  <head>
    <link rel="stylesheet" href="test.css" />
  </head>
  <body>
    <div id="test1"></div>
    <div id="test3"></div>
    <div id="test2"></div>
  </body>
</html>

排除以上代码，结果如下： detail image

底部不应出现白色部分。

Answer 1

Add an empty block level element and use clear: both; before the parent element ends, which holds floated elements, now this one is cheap solution to clear your floating elements which will do the job for you but, I would recommend not to use this.

来自here

html, body{
    width: 100%;
    height: 100%;
    margin: 0;
}

#test1, #test2{
    display:inline-block;
    height: 100%;
    width:30%;
}
#test1{
    float:left;
    background: #111111;
}
#test2{
    float:right;
    background: #009A61;
}

#test3{
    display:inline-block;
    height: 100%;
    width:40%;
    background: cornsilk;
}

.clear {
    clear: both;
}

<!doctype html>
  <html>
  <head>
    <link rel="stylesheet" href="test.css" />
  </head>
  <body>
    <div id="test1"></div>
    <div id="test3"></div>
    <div id="test2"></div>
    <div class="clear"></div>
  </body>
</html>

这个有用吗？我没有看到问题或者可能没有正确理解它

Answer 2

你的三个 div 都是 1 个视口高，但是 #test3 div 是行内块，所以它创建了一个行框，它位于其中。所有线框都包含一个支柱，其基线与 #test3 div 的底部垂直对齐，并且支柱的下降部分悬挂在其下方。创建垂直滚动条以将文档显示到支柱的底部，将额外的高度显示为白色间隙。

要修复，只需通过 #test3 div vertical-align:top 将支柱的垂直对齐方式与 #test3 div 的垂直对齐方式分离。

html, body{
    width: 100%;
    height: 100%;
    margin: 0;
}

#test1, #test2{
    display:inline-block;
    height: 100%;
    width:30%;
}
#test1{
    float:left;
    background: #111111;
}
#test2{
    float:right;
    background: #009A61;
}

#test3{
    display:inline-block;
    height: 100%;
    width:40%;
    background: cornsilk;
    vertical-align:top;
}

    <div id="test1"></div>
    <div id="test3"></div>
    <div id="test2"></div>

使用“float:right”或 'float:left' 时，将 css 高度设置为 100% 不起作用

It dosen't work to set the css Height 100% when use 'float:right’ or 'float:left'

html

css

height