Question

屏幕快照中的列表组现在可以滚动-完美，但是我希望它们占据剩余页面高度的100％。我尝试了100vh-运气不好，因为页面上有其他组件。 100％的高度会忽略滚动，并列出整个页面的所有内容。调整“ vh”以获取正确的值使我接近了，但是重新调整大小后又将其扔掉了。

我认为我可能需要使用flexbox来使列表组填充页面的其余部分，但是到目前为止，我还没有成功。

https://jsfiddle.net/aq9Laaew/128800/

<body>
<style>
    .list-group {
        height: 70vh;
        overflow-y: scroll;
    }
</style>
<main role="main" class="container-fluid">
    <div class="row" style="font-size: 10pt;">
        <div class="col-sm">
            <div class="card">
                <div class="card-header">
                    <strong>Notices</strong>
                </div>
                <ul class="list-group list-group-flush">
                    @foreach($notices as $notice)
                        <li class="list-group-item">
                            {{ $notice['body'] }}<br/>
                            <small class="text-muted float-right">{{ $notice['datetime'] }} by {{ $notice['user_id'] }}</small>
                        </li>
                    @endforeach
                </ul>
            </div>
        </div>
        // ADDITIONAL COL-SM'S
</main>

Answer 1

您是否只需要计算卡的高度，即100％的视口高度减去elem的填充顶部？

body

然后您唯一要做的就是将.card { height: calc(100vh - 3.75rem); }设置为overflow：

list-group

小提琴： https://jsfiddle.net/aq9Laaew/128992/

Answer 2

通过在主体标签jsfiddle中添加溢出属性来尝试。

2018/08/02 11:45:24.210 [C] [asm_amd64.s:573]  the request url is  /api/devices/functest
2018/08/02 11:45:24.210 [C] [asm_amd64.s:573]  Handler crashed with error reflect: Call with too few input arguments
2018/08/02 11:45:24.210 [C] [asm_amd64.s:573]  /usr/local/go/src/runtime/asm_amd64.s:573
2018/08/02 11:45:24.210 [C] [asm_amd64.s:573]  /usr/local/go/src/runtime/panic.go:502
2018/08/02 11:45:24.210 [C] [asm_amd64.s:573]  /usr/local/go/src/reflect/value.go:364
2018/08/02 11:45:24.210 [C] [asm_amd64.s:573]  /usr/local/go/src/reflect/value.go:308
2018/08/02 11:45:24.210 [C] [asm_amd64.s:573]  /home/golang/go/src/github.com/astaxie/beego/router.go:847
2018/08/02 11:45:24.210 [C] [asm_amd64.s:573]  /usr/local/go/src/net/http/server.go:2694
2018/08/02 11:45:24.211 [C] [asm_amd64.s:573]  /usr/local/go/src/net/http/server.go:1830
2018/08/02 11:45:24.211 [C] [asm_amd64.s:573]  /usr/local/go/src/runtime/asm_amd64.s:2361
2018/08/02 11:45:24.211 [server.go:2921]  [HTTP] http: multiple response.WriteHeader calls

引导程序列表组溢出完整容器高度

2 个答案: