Question

我遇到了在html中获取两个div以在同一个位置结束的问题。这个片段几乎可以解释这个问题：

html,
body {
  height: 100%;
}

div.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
  width: 89.7%;
  float: right;
  display: inline-block;
  margin-top: 5px;
}

.tabContent {
  height: 100%;
  box-sizing: border-box;
}

#divTableList,
.contentDiv {
  border: 1px solid #ccc;
}

.contentDiv {
  height: 100%;
  width: 89.7%;
  margin-top: 2px;
  background-color: #f1f1f1;
  text-align: center;
  display: inline-block;
  float: right
}

#divTableList {
  height: 100%;
  box-sizing: border-box;
  width: 10%;
  margin-top: 5px;
  float: left;
  background-color: #f1f1f1;
  text-align: center;
  display: inline-block
}


/* Style the buttons inside the tab */

.tablinksimage {
  background-color: inherit;
  float: right;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transform: rotate(0);
  transition: all 0.3s;
}

.tablinksimagemain {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: all 0.3s;
}


.tablinks:hover,
.menulinks:hover,
.tablelinks:hover {
  background-color: #ccc;
}

.tablinks.active,
.menulinks.active,
.tablelinks.active {
  background-color: #ccc;
  color: #3f51b5;
}

.tablinksimagemain.active {
  background-color: #ccc;
}

.tablinksimagemain:hover {
  background-color: #ccc;
}

<body>
  <div id="tabDiv" style="width: 100%; height: 100%; padding-left: 5px; padding-right: 5px; visibility: visible">
    <div class="tab">
      <img src="img/table.png" class="tablinksimagemain active" onclick="openTab(event, 'tabContent', 0)">
      <img src="img/table-structure.png" class="tablinksimagemain" onclick="openTab(event, 'tabStructure', 1)">
      <img src="img/table-info.png" class="tablinksimagemain" onclick="openTab(event, 'tabInfo', 2)">
      <img src="img/proc.png" class="tablinksimagemain" onclick="openTab(event, 'tabProc', 3)">
      <img src="img/table-query.png" class="tablinksimagemain" onclick="openTab(event, 'tabQuery', 4)">
      <img id="imgLogout" class="tablinksimage" src="img/logout.png">
      <img id="imgRefresh" class="tablinksimage" src="img/refIcon.png">
    </div>
    <div id="divTableList">

    </div>
    <div id="tabContent" class="tabContent" style="display: block">
      <div id="contentDivContent" class="contentDiv">

      </div>
    </div>

    <div id="tabStructure" class="tabContent" style="display: none">

    </div>

    <div id="tabInfo" class="tabContent" style="display: none">

    </div>
    <div id="tabProc" class="tabContent" style="display: none">

    </div>

    <div id="tabQuery" class="tabContent" style="display: none">

    </div>
  </div>
</body>

正如你可以看到主要内容的div比左边的div更进一步，我知道这是由于菜单栏，但我很困惑，因为它们的高度都设置为100％，因为它是他们都在的容器。

我弄乱了百分比让他们匹配，这让我遇到了第二个问题：他们匹配我的屏幕分辨率但是一旦分辨率改变它们将不再匹配（甚至打开javascript控制台导致它）。

我不知道我做错了什么，因为我一直认为将高度设置为100％意味着它会停在身体的高度极限。

有什么想法吗？

Answer 1

混淆的根源可能是像“100％”这样的高度百分比实际上并没有“分割”包含元素的高度。它们只是根据包含元素的高度解析为精确值。

所以你可以自由地拥有以下

<style>
   .parent {
     height: 100px;
   }
   .child {
     height: 50%;
   }
</style>
<div class="parent">
  <div class="child">a</div>
  <div class="child">b</div>
  <div class="child">c</div>
</div>

每个孩子都高50便士。当然，这意味着将有3 x 50px或150px的内容，内容将溢出父div。这也很好：HTML不要求div容纳在容器内。

这基本上就是您的代码段中发生的事情。菜单占用一些空间，然后另一个div占用100％，而不是剩余的房间，但占用包含div的总大小。这使它溢出身体，因此看起来左边的那个太小了。

在支持它的浏览器中，一种解决方案是使用：

div.tab {
  height: 100px; // or whatever you want
}

.tabcontent {
  height: calc(100% - 100px);
}

在其他浏览器中，答案比较棘手。

得到两个div来匹配高度

1 个答案: