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

Question

I am working on a web project and need to design an HTML page. I want to set the element's height to a percentage to make it better fit the page.

When I use float in CSS and set:

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

It doesn't work with height. I temporarily fixed it by changing the position rather than using float. I want to to why it doesn't work. And anyone can help me?

This is the faulty code:

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>

Exclude the above codes, the result following: detail image

It shouldn't appear white section in the bottom.

Use height: 100vh; this takes the height of the view – omukiguy Dec 24 '17 at 18:12 — omukiguy, Dec 24 '17 at 18:12

score 0 · Answer 1 · answered Dec 24 '17 at 18:20

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.

From 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>

Did this work? I didn't see the problem or might not have understood it correctly

score 0 · Accepted Answer · answered Dec 24 '17 at 18:50

Your three divs are each 1 viewport high, but the #test3 div is inline-block, so it creates a line box in which it sits. All line boxes contain a strut, the baseline of which is vertically aligned with the bottom of the #test3 div, and the descender part of the strut hangs down below this. The vertical scroll bar is created to show the document to the bottom of the strut, showing the additional height as a white gap.

To fix, just detach the vertical alignment of the strut, from that of the #test3 div by making the #test3 div vertical-align:top.

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>

Ok, It's really a beatiful answer. I have understood it. Thank you very much. — Beibei Kang, Dec 25 '17 at 08:58

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

2 Answers2