Question

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

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

www.abcd.com/number=500

它不适用于身高。我通过更改body, html{ height: 100%; width: 100% }而不是使用float来暂时修复它。我想为什么它不起作用。任何人都可以帮助我吗？

这是错误的代码：

position

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;
}

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

底部不应出现白色部分。

Answer 1

添加一个空的块级元素并使用clear：both;在父元素结束之前，它保存了浮动元素，现在这个是清除你的浮动元素的廉价解决方案，但是，我建议你不要使用它。

来自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 #test3，将支柱的垂直对齐方式与vertical-align:top 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％

2 个答案: