Volatil3 Volatil3 - 5 months ago 45
CSS Question

IE10 min-height not working

I am unable to set 100% height of my DIVs despite of setting

min-height
for IE. Below are CSS and HTML respectively. Screenshot also attached.

As you can see , the scrollbar on left is not displaying 100%

enter image description here

CSS

body
{
margin:0;padding:0;
min-height:100%;
height:100%;
}
#container
{
background-color: "#FFF";
width:100%;
margin: 1%;
overflow:auto;
min-height:100%;
height:100%;

}
#tree_register_abwab
{
width: 30%;
float: right;
}
#content
{
float: right;
margin-right: 1%;
overflow-y:scroll;
width: 60%;
min-height:100%;
height:100%;
}
.dynatree-title{
font-size: 15px !important;
font-style:normal;
font-family: Arial !important;
font-weight:100;
}
.question
{
font-style:normal;
color:blue;
font-family:"Jameel Noori Nastaleeq"; color: rgb(191,22,38); font-size:15pt;
}
.answer
{
font-style:normal;
color:blue;
font-family:"Jameel Noori Nastaleeq"; color:rgb(0,0,0); font-size:15pt;
margin-top: 2%;
display: block;
}
#pdficon
{
margin-right: 1%;
}
.bold{font-weight:bold;font-size: 18pt;}


HTML



<html dir=rtl>
<head>
<title></title>
<meta http-equiv="X-UA-Compatible" content="IE=10">
<meta charset="utf-8" >
<link href="ui.dynatree.css" rel="stylesheet" type="text/css" />
<link href="tree-custom.css" rel="stylesheet" type="text/css" />
<LINK REL=StyleSheet HREF="search.css" TYPE="text/css" MEDIA=all />
<script src = "jquery-1.8.3.min.js"></script>
<script src="jquery-ui.custom.min.js" type="text/javascript"></script>
<script src="jquery.cookie.js" type="text/javascript"></script>
<script src="jquery.dynatree.js" type="text/javascript"></script>
<script src="search.js" ></script>
</head>
<body>
<div id="container">
<div id="tree_register_abwab"></div>
<div id="content">
<span id="question" class="question bold">
</span>
<span id="pdficon"><a title=" " href="#"><img src="pdf_icon.png" border="0" /></a></span>
<span id="answer" class="answer">
</span>
</div>
</div>
</body>
</html>

Answer

Add html to the top of the css file by changing the body part of the CSS to:

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

You can also remove all of the min-height properties you have set as height:100% should cover it.