html div不能完全显示

Question

Hi below is my css & html,i'm trying to align two div in a webpage with full height(100%) but is not working

.left_menu
 {
   height:100% !important;
   width:30%;
   border:1px solid grey;
   float:left;
 }

.right_menu
{
  height:100% !important;
  width:70%;
  border:1px solid grey;
  float:right;
}

and this is my html

<div class="left_menu">
</div>
<div class="right_menu">
</div>

this code is not taking full height,please help

Answer 1

set html,body min-height to 100%

Child occupies the height of parent so 100% height of parent will give 100% height to child

Considering that you div is direct child of html,body(if not then you need to maintain the height ratio with its parent)

html,body{
height:100%;
 min-height:100%; 
}

Answer 2

I think that problem is in your border properties as they are adding extra space. So, I am not sure if this fit best your needs, but I would do something like this:

.left_menu
 {
   height:100% !important;
   width:29%;
   border:1px solid grey;
   float:left;
 }

.right_menu
{
  height:100% !important;
  width:69%;
  border:1px solid grey;
  float:left;
}

EDIT: This might be better solution, because previous one will work different for devices with different width(for small device right_menu goes under left_menu ). Here I just specify width for left_menu .

 .left_menu
 {
  height:100% !important;
  width:30%;
  border:1px solid grey;
  float:left;
 }

 .right_menu
{
  height:100% !important;
  border:1px solid grey;
}

Answer 3

You set the height of the div to 100% but 100% of what? It's always 100% of the parent element but what is the parent element of the div set to? My bet is you don't have it set to anything and the browser has no way of calculating what 100% of nothing is.

Answer 4

Just add display: inline-block; and it should solve the problem (did for me)