Bootstrap：如何制作固定高度（以百分比为单位）的可滚动列表

Question

我试图使我的Web应用看起来更漂亮，所以我想使用Bootstrap。 这是当前站点的屏幕截图：

注意这两个列表：“搜索结果”和“已选择”-它们是可滚动的并且具有固定的高度（窗口高度的35％）。

如何使用Bootstrap制作固定高度（以百分比为单位）的绝对相同的可滚动列表？ （除了这些列表以外的所有内容都可以在Bootstrap中正常工作。）

当前的“旧”版本：

<body>
<div id="map-canvas"></div>
<div id="over-map-canvas">
    <div id="div-type-select">
        <select id="select-type-select">
            <option value="genotyping">Genotyping</option>
            <option value="full genomes">Full genomes</option>
            <option value="mtDNA">mtDNA</option>
            <option value="Y-chromosome">Y-chromosome</option>
        </select>
    </div>
    <input type="text" id="search" placeholder="Search">
    <script>
        document.getElementById('search').addEventListener('keypress', function(event) {
            if (event.keyCode == 13) {
                event.preventDefault();
                search();
            }
        });
    </script>
    <div id="div-age-input">
        Age (years before present):
        <input type="text" id="age-from" placeholder="0">
        <script>
            $('#age-from').on("input", function() {
                $( "#slider-range" ).slider('values', 0, $( "#age-from" ).val());
            });
        </script>
        <input type="text" id="age-to" placeholder="80000">
        <script>
            $('#age-to').on("input", function() {
                $( "#slider-range" ).slider('values', 1, $( "#age-to" ).val());
            });
        </script>
    </div>
    <div id="slider-range"></div><br>
    <div id="div-label-found-list>"><b>Search results:</b><br></div>
    <div id="div-sample-list"><ol id="ol-found-sample-list" type="1"></ol></div>
    <div id="div-found-menu"><a href="#" onclick="javascript:select_all_found();">Select all</a></div>
    <div id="div-label-selected-list>"><b>Selected:</b><br></div>
    <div id="div-sample-list-2"><ol id="ol-selected-sample-list" type="1"></ol></div>
    <div id="div-selected-menu">
        <a href="#" id="a-group-selected" onclick="javascript:selectedPopulations = !selectedPopulations; update_selected_list_view();">Populations</a>
        <a href="#" onclick="javascript:clear_selected();">Clear</a>
    </div>
    <div id="div-analysis-menu">
        <a href="#" onclick="javascript:pca();">PCA</a>
        <a href="#" onclick="javascript:clear_selected();">ALDER</a>
    </div>
</div>
</body>

还有一个“新”版本：

<body>
<div id="map-canvas" class="col-md-9"></div>

<div id="menu" class="col-md-3">
    <br>
    <select id="select-type-select" class="form-control">
        <option value="genotyping">Genotyping</option>
        <option value="full genomes">Full genomes</option>
        <option value="mtDNA">mtDNA</option>
        <option value="Y-chromosome">Y-chromosome</option>
    </select>

    <br>
    <div class="form-group">
            <input type="text" class="form-control" id="search" placeholder="Search">
            <script>
                document.getElementById('search').addEventListener('keypress', function(event) {
                    if (event.keyCode == 13) {
                        event.preventDefault();
                        search();
                    }
                });
            </script>
    </div>

    <h5 class="bold">Search results:</h5>
        <ul id="ol-found-sample-list" class="scrollable-list"></ul>

    <br>
    <div class="btn-group btn-group-justified">
            <div class="btn-group">
                <button type="submit" id="like" class="btn btn-default">PCA</button>
            </div>
            <div class="btn-group">
                <button type="submit" id="nope" class="btn btn-default">ALDER</button>
            </div>
    </div>
</div>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

Answer 1

这可能很简单：

        #menu {
            display:flex;
        }

        #menu .grow {
            flex-grow:1;
        }


<div id="menu" class="col-md-3">
  <div>
    <select id="select-type-select" class="form-control">
        <option value="genotyping">Genotyping</option>
        <option value="full genomes">Full genomes</option>
        <option value="mtDNA">mtDNA</option>
        <option value="Y-chromosome">Y-chromosome</option>
    </select>

    <div class="form-group">
     <input type="text" class="form-control" id="search" placeholder="Search">
            <script>
                document.getElementById('search').addEventListener('keypress', function(event) {
                    if (event.keyCode == 13) {
                        event.preventDefault();
                        search();
                    }
                });
            </script>
    </div>
  </div>
  <div class="grow">
    <h5 class="bold">Search results:</h5>
    <ul id="ol-found-sample-list" class="scrollable-list">

        </ul>
  </div>
  <div class="grow">
    <div class="btn-group btn-group-justified">
            <div class="btn-group">
                <button type="submit" id="like" class="btn btn-default">PCA</button>
            </div>
            <div class="btn-group">
                <button type="submit" id="nope" class="btn btn-default">ALDER</button>
            </div>
    </div>
  </div>
</div>

flexbox指南https://css-tricks.com/snippets/css/a-guide-to-flexbox/

并使用autoprefixer或类似的方式也支持前缀和旧语法：

https://github.com/postcss/autoprefixer

Bootstrap：如何制作固定高度（以百分比为单位）的可滚动列表

问题描述

1 个解决方案

解决方案1
0 2015-03-12 01:33:19

Bootstrap：如何制作固定高度（以百分比为单位）的可滚动列表

问题描述

1 个解决方案

解决方案1 0 2015-03-12 01:33:19

解决方案1
0 2015-03-12 01:33:19