Question

我有这个div（它是一个popout侧面菜单），我设置为100vh所以没有滚动。

在此弹出菜单中，我有一个目录和一个搜索字段。我想做的是让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>

动态调整另一个div容器

1 个答案: