Question

我在这里问了一次：Content DIV minheight not working in IE 11 and footer is too low
但解决方案不正确，因为左侧和右侧内容无法设置宽度70％：30％

我在div-content上使用CSS minheight但它在Internet Explorer 11版本中不起作用（但其他浏览器也没问题。）IE-11可以设置高度但是当div有自动垂直拉伸时多余的文字。所以我需要使用最小高度。

截图：

IE：https://s21.postimg.org/p31mpj4zb/11111.png
Chrome：https://s18.postimg.org/mjdo260ft/22222.png

＆＃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;

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

Answer 1

好的，这就像虫子。

所以我也将min-height添加到左侧和右侧。（子div）并且它工作-_-“

IE 11上的CSS布局min-height和flexbox不支持

1 个答案: