内容DIV minheight在IE 11和页脚中不起作用太低

时间：2016-10-07 05:18:46

标签： html css

我从头开始构建简单的模板Web。我在div-content上使用css minheight但它在Internet Explorer版本11中不起作用（但其他浏览器没问题。）并且页脚太低。如何使其与IE浏览器一起正常工作？

截图：

＆＃13;
＆＃13; 
html,
body {
  margin: 0px;
  padding: 0px;
}
body {
  background: #cceeff;
  font-family: "verdana";
}
#wrapper {
  margin: auto;
  padding: 0px;
  width: 75%;
}
.toptext {
  margin-top: 1vh;
  margin-bottom: 1vh;
}
.toptext span a {
  padding: 3px;
  color: #000;
  text-decoration: none;
  background: lightblue;
}
#header {
  margin: 0px;
  padding: 0px;
  width: 100%;
  height: 18vh;
  float: left;
  background: #99d6ff;
}
#header h1 {
  margin: 0px;
  padding: 0px;
  /*border-bottom:1px solid #eee;*/
  font-size: 20px;
  padding-bottom: 10px;
}
#nav {
  margin: 0px;
  padding: 0px;
  width: 100%;
  float: left;
  background: #80ffe5;
}
#nav ol {
  list-style: none;
  margin: 0px;
  padding: 0px;
}
#nav ol li {
  display: block;
  padding: 6px 10px;
  float: left;
  position: relative;
}
#nav ol a {
  display: block;
  padding: 5px 10px;
  color: #000;
  text-decoration: none;
}
#nav ol a:hover {
  background: #f2f2f2;
}
#nav ol ol {
  position: absolute;
  top: 35px;
  left: 0px;
  display: none;
  background: #80ffe5;
}
#nav ol ol li {
  border-bottom: 1px;
}
#content {
  float: left;
  margin-top: 2vh;
  padding: 0px;
  width: 100%;
  display: flex;
  min-height: 70vh;
  word-break: break-all;
}
#right-side {
  float: left;
  margin-left: 2vh;
  width: 30%;
  border: solid 1px grey;
  background: white;
}
#right-side ol {
  list-style: none;
}
#left-side {
  float: left;
  width: 70%;
  border: solid 1px grey;
  background: white;
}
#footer {
  float: left;
  margin-top: 2vh;
  padding: 2vh;
  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: 5px 0 0 8px;
  font: 8pt Verdana;
  color: #888;
  height: 20px;
  line-height: 18px;
  padding: 0;
  background: transparent;
  border: 0;
  max-width: 100%px;
}
＆＃13; 
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>Template</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <link rel="stylesheet" type="text/css" href="css/style.css">

</head>

<body>
  <div id="wrapper">
    <div id="header">
      <h1><p>Header</p></h1>
    </div>
    <div id="nav">
      <ol>
        <li><a href="<?php echo base_url();?>index.php/home">Home</a>
        </li>
        <li><a href="#">About us</a>
          <ol>
            <li><a href="#">ประวัติ</a>
            </li>
            <li><a href="#">xxxxx</a>
            </li>
            <li><a href="#">xxxxxx</a>
            </li>
          </ol>
        </li>
        <li><a href="#">Product</a>
          <ol>
            <li><a href="#">xxxxx</a>
            </li>
            <li><a href="#">xxxxx</a>
            </li>
            <li><a href="#">xxxxxx</a>
            </li>
          </ol>
        </li>
        <li><a href="#">Contact us</a>
        </li>
      </ol>
    </div>
    <div id="content">
      <div id="left-side">
        aaaaaaaaaaaaaaaaaaaaaaaa
      </div>
      <div id="right-side">
        <div class="searchbox">
          <?php echo form_open( 'search');?>
          <h4 style="text-align:center;"> ค้นหาสินค้า </h4>
          <div class="search-bar">
            <input type="text" size="20" class="sfield" name="searchterm" value="Search...">
            <input type="image" class="searchbutton" name="search" src="http://www.spheretekk.com/bc/images/search-icon.gif" alt="Search">
          </div>
          <?php echo form_close();?>
        </div>
      </div>
      <div class="fa fa-search"></div>

    </div>
    <div id="footer">
      <p>Footer</p>
    </div>
  </div>
</body>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：-1)

使用修改后的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;
}
.toptext span a {
  padding: 3px;
  color: #000;
  text-decoration: none;
  background: lightblue;
}
#header {
  margin: 0px;
    padding: 0px;
    width: 100%;
    height: 18vh;
    float: left;
    background: #99d6ff;
}
#header h1 {
  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;
}
#nav ol {
  list-style: none;
  margin: 0px;
  padding: 0px;
}
#nav ol li {
  display: block;
  padding: 6px 10px;
  float: left;
  position: relative;
}
#nav ol a {
  display: block;
  padding: 5px 10px;
  color: #000;
  text-decoration: none;
}
#nav ol a:hover {
  background: #f2f2f2;
}
#nav ol ol {
  position: absolute;
  top: 35px;
  left: 0px;
  display: none;
  background: #80ffe5;
}
#nav ol ol li {
  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-side ol {
  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: 5px 0 0 8px;
  font: 8pt Verdana;
  color: #888;
  height: 20px;
  line-height: 18px;
  padding: 0;
  background: transparent;
  border: 0;
  max-width: 100%px;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>Template</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	
</head>

<body>
  <div id="wrapper">
    <div id="header">
      <h1><p>Header</p></h1>
    </div>
    <div id="nav">
      <ol>
        <li><a href="<?php echo base_url();?>index.php/home">Home</a>
        </li>
        <li><a href="#">About us</a>
          <ol>
            <li><a href="#">???????</a>
            </li>
            <li><a href="#">xxxxx</a>
            </li>
            <li><a href="#">xxxxxx</a>
            </li>
          </ol>
        </li>
        <li><a href="#">Product</a>
          <ol>
            <li><a href="#">xxxxx</a>
            </li>
            <li><a href="#">xxxxx</a>
            </li>
            <li><a href="#">xxxxxx</a>
            </li>
          </ol>
        </li>
        <li><a href="#">Contact us</a>
        </li>
      </ol>
    </div>
    <div id="content">
      <div id="left-side">
        aaaaaaaaaaaaaaaaaaaaaaaa
      </div>
      <div id="right-side">
        <div class="searchbox">
          <?php echo form_open( 'search');?>
          <h4 style="text-align:center;"> ??????????? </h4>
          <div class="search-bar">
            <input type="text" size="20" class="sfield" name="searchterm" value="Search...">
            <input type="image" class="searchbutton" name="search" src="http://www.spheretekk.com/bc/images/search-icon.gif" alt="Search">
          </div>
          <?php echo form_close();?>
        </div>
      </div>
      <div class="fa fa-search"></div>

    </div>
    <div id="footer">
      <p>Footer</p>
    </div>
  </div>
</body>

相关问题
最新问题