动态调整另一个Div容器内部的DIV高度

Question

我有我设置为100VH的DIV(这是一个窗口菜单(，因此没有滚动。

在此弹出菜单中，我有一个目录和搜索字段。我想做的是让TOC填充大多数窗口，但是当有人搜索时，显示了搜索结果div，并且TOC的调整为小于80VH(现在是什么(，以便您可以看到两者您不需要滚动条。

例如，TOC为80VH，由于没有人搜索任何东西，因此搜索容器为0VH(您看不到它(。如果有人搜索某些东西，并且容器出现。我希望它在搜索容器上具有最大的36VH高度，而TOC具有大约相同的(36VH(，因此两者都填充100VH容器。

现在的情况，如果我将TOC容器设置为36VH，那么弹出窗口上有很多浪费的真实情况，很高兴填充信息。

有意义？

这是代码：

.searchResults  {
overflow-y: auto;
max-height: 36vh;
padding: 15px;
background-color: #ffffff;
border-right: 1px solid;
border-left: 1px solid;
border-bottom: 1px solid;
border-color: rgba(221, 221, 221, 1);
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
font-size: 0.8vw;
}
.panel-body {
padding: 15px;
max-height: 36vh;
overflow-y: auto;
        }

和javascript：

    <div id="resultsContainer" class="resultsContainer">
        <div id="results"></div>
        </div>
        <br>
        <div class="searchContainer" id="searchContainer">
        <div class="SearchHeading">
        <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseSearch" title="Collapse / Expand Search Results">
        <svg class="icon-file"><use xlink:href="#icon-file"></use>
        </svg>
Search Results - <font size="1"><i>Click to Collapse / Expand</i></font>
        </a>
        </h4>
        </div>
        <div id="collapseSearch" class="searchResults panel-collapse collapse in">
        <ul id="titles" class="nav nav-stacked nav-pills">
        </ul>
        </div>
        </div>
        <script src="vp/predictiveSearch.js"></script>
        <!-- End of Search Function -->
        <div id="shape-pages" class="panel panel-default" style="display: none">
        <div class="panel-heading">
        <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapsePages">
        <svg class="icon-file"><use xlink:href="#icon-file"></use>
        <!-- Collapse Page Note -->
        </svg> Pages - <font size="1"><i>Click to Collapse / Expand</i></font>
        <!-- End Collapse Page Note -->
        </a>
        </h4>
        </div>
        <div id="collapsePages" class="panel-collapse collapse in">
        <div id="panel-pages" class="panel-body">
        </div>
        </div>
        </div>
        </div>
        </div>

Answer 1

这是使用flex的简化解决方案，允许搜索结果占据垂直高度的50％。TOC将始终填满剩余空间。

单击按钮将添加一些虚假的搜索结果，以显示布局如何调整到内容。

/*
/  Only for demo purposes
/  Not needed for the working solution
*/
var btnSearch = document.getElementById("search");
btnSearch.addEventListener("click", () => {
  var sidebar = document.getElementById("sidebar");
  var searchResults = document.getElementById("searchResults");
  searchResults.prepend("Search Results");
});
var btnSearchLong = document.getElementById("searchLong");
btnSearchLong.addEventListener("click", () => {
  var sidebar = document.getElementById("sidebar");
  var searchResults = document.getElementById("searchResults");
  searchResults.prepend("Search Results Search Results Search Results Search Results Search Results Search Results Search Results Search Results Search Results Search Results Search Results Search Results ");
});

html,
body {
  height: 100%;
}
#sidebar {
  display: flex;
  height: 100vh;
  width: 200px;
  flex-direction: column;
  background-color: #eaeaea;
}
#searchResults {
  overflow: scroll;
}
#toc {
  flex: 1;
  background-color: pink;
  min-height: 50vh;
}
/*
/  Only for demo purposes
/  Not needed for the working solution
*/
#search {
  position: absolute;
  left: 220px;
  top: 15px;
}
#searchLong {
  position: absolute;
  left: 220px;
  top: 35px;
}

<div id="sidebar">
  <div id="searchResults"></div>
  <div id="toc">TOC</div>
</div>
<button id="search">Search - Short Results</button>
<button id="searchLong">Search - Long Results</button>