Content Div Minheight Not Working In Ie 11 And Footer Is Too Low
I build simple template web from scratch. I use css minheight on div-content but it's not working in Internet Explorer version 11 (but other browser is fine.) and footer is too l
Solution 1:
Use modified css
html,
body {
margin: 0px;
padding: 0px;
}
body {
background: #cceeff;
font-family: "verdana";
}
*{overflow:auto;}
#wrapper {
margin: auto;
padding: 0px;
width: 75%;
}
.toptext {
margin-top: 1vh;
margin-bottom: 1vh;
}
.toptextspana {
padding: 3px;
color: #000;
text-decoration: none;
background: lightblue;
}
#header {
margin: 0px;
padding: 0px;
width: 100%;
height: 18vh;
float: left;
background: #99d6ff;
}
#headerh1 {
margin: 0px;
padding: 0px;
/*border-bottom:1px solid #eee;*/font-size: 20px;
padding-bottom: 10px;
}
#nav {
margin: 0px;
padding: 0px;
height: 4vh;
width: 100%;
float: left;
background: #80ffe5;
}
#navol {
list-style: none;
margin: 0px;
padding: 0px;
}
#navolli {
display: block;
padding: 6px10px;
float: left;
position: relative;
}
#navola {
display: block;
padding: 5px10px;
color: #000;
text-decoration: none;
}
#navola:hover {
background: #f2f2f2;
}
#navolol {
position: absolute;
top: 35px;
left: 0px;
display: none;
background: #80ffe5;
}
#navololli {
border-bottom: 1px;
}
#content {
float: left;
margin-top: 2vh;
padding: 0px;
width: 100%;
display: flex;
height: 65vh;
word-break: break-all;
}
#right-side {
float: left;
margin-left: 2vh;
width: 30%;
border: solid 1px grey;
background: white;
}
#right-sideol {
list-style: none;
}
#left-side {
float: left;
width: 70%;
border: solid 1px grey;
background: white;
}
#footer {
float: left;
margin-top: 2vh;
padding: 2vh;
height: 9vh;
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: #99d6ff;
}
.searchbox {
background: #9999ff;
margin: 10px;
margin-top: 20px;
padding: 5px;
border-radius: 5px;
}
.search-bar {
height: 29px;
background-color: #e1e1e1;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 10px;
width: 230;
position: relative;
}
.search-bar.searchbutton {
position: absolute;
top: 23%;
right: 5px;
}
.sfield {
float: left;
margin: 5px008px;
font: 8pt Verdana;
color: #888;
height: 20px;
line-height: 18px;
padding: 0;
background: transparent;
border: 0;
max-width: 100%px;
}<!DOCTYPE html><html><head><metacharset="utf-8" /><title>Template</title><metaname="viewport"content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /></head><body><divid="wrapper"><divid="header"><h1><p>Header</p></h1></div><divid="nav"><ol><li><ahref="<?php echo base_url();?>index.php/home">Home</a></li><li><ahref="#">About us</a><ol><li><ahref="#">???????</a></li><li><ahref="#">xxxxx</a></li><li><ahref="#">xxxxxx</a></li></ol></li><li><ahref="#">Product</a><ol><li><ahref="#">xxxxx</a></li><li><ahref="#">xxxxx</a></li><li><ahref="#">xxxxxx</a></li></ol></li><li><ahref="#">Contact us</a></li></ol></div><divid="content"><divid="left-side">
aaaaaaaaaaaaaaaaaaaaaaaa
</div><divid="right-side"><divclass="searchbox">
<?php echo form_open( 'search');?>
<h4style="text-align:center;"> ??????????? </h4><divclass="search-bar"><inputtype="text"size="20"class="sfield"name="searchterm"value="Search..."><inputtype="image"class="searchbutton"name="search"src="http://www.spheretekk.com/bc/images/search-icon.gif"alt="Search"></div>
<?php echo form_close();?>
</div></div><divclass="fa fa-search"></div></div><divid="footer"><p>Footer</p></div></div></body>
Post a Comment for "Content Div Minheight Not Working In Ie 11 And Footer Is Too Low"