I'm currently working on a web project and I need to create an HTML page. I'd like to adjust the height of an element to a percentage to ensure it fits the page well.
However, when I try to use the float property in CSS and set it as follows:
body, html{
height: 100%;
width: 100%
}
The height doesn't seem to respond to this setting. As a temporary solution, I changed the position property instead of using float. I'm curious to understand why it's not working as intended. Can anyone offer some insights?
Here is the code snippet causing the issue:
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>If you exclude the above code snippets, you'll see the following result: view detailed image
The issue is that there shouldn't be a white section at the bottom of the page.