Question

我试图让我的网络应用看起来很漂亮，所以我想使用Bootstrap。这是当前网站的屏幕截图： screenshot of current site

请注意以下两个列表：＆＃34;搜索结果＆＃34;和＆＃34;选择＆＃34; - 它们是可滚动的并且具有固定的高度（窗口高度的35％）。

如何使用Bootstrap制作具有固定（百分比）高度的完全相同的可滚动列表？（除了这些列表之外的所有内容都可以与Bootstrap一起使用。）

当前＆＃34; old＆＃34;版本：

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

＆＃34; new＆＃34;版本：

<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 个答案: