使可缩放的 div 填充剩余空间
[英]Make a scollable div fill remaining space
问题描述
我想在网站的左侧显示所有产品。
.
但我无法使中间部分（1）可滚动和（2）填充搜索栏和底部按钮之间的整个空间。 设置一个高度使整个东西可以滚动，但如果我试图让它填充空间，滚动就会消失，你无法访问底部的产品。 感谢您的帮助
body { overflow: hidden; } h5 { font-size: 1.2rem; }.main-container { top: 0; right: 0; bottom: 0; left: 0; }.left-row { width: 20%; border: 1px solid rgba(0, 0, 0, .125); justify-content: flex-start; }.border-top { height: fit-content; overflow: scroll; }.products { border: none; }.add { border-top: 1px solid rgba(0, 0, 0, .125); border-right: 1px solid rgba(0, 0, 0, .125); width: 20%; padding: 1rem; background-color: rgb(242, 242, 242); }.card { margin-bottom: 1rem; }.card-body.card-body { height: 100px; }.hover:hover { cursor: pointer; }
<body> <div class="main-container d-flex flex-row"> <div class="left-row d-flex flex-column"> <div class="input-group justify-content-center p-3"> <input type="search" class="form-control" placeholder="Search" /> </div> <div class="border-top"> <div class="products card-body"> @foreach (Product product in Model.products) { <div class="card hover" style="display: flex"> <p>product</p> </div> } </div> </div> <div class="add fixed-bottom d-flex justify-content-center"> <a type="button" class="btn btn-primary w-100">Add</a> </div> </div> </div> </body>
1 个解决方案
解决方案1
0 2022-08-06 14:03:44
我删除了你所有的课程，因为我不确定它们是否与某个图书馆有关。 所以只是为了简化这一切，我尝试主要使用.row和.col ，以及.max来简单地flex: 1; 需要的地方
/*QuickReset*/ *, *::before, *::after {margin:0; box-sizing: border-box;} body { overflow: hidden; height: 100vh; display: flex; }.row, .col { display: flex; }.row { width: 100%; }.col { flex-direction: column; }.max { flex: 1; }.clip { overflow: auto; } /* Other app styles */ aside { width: 20%; } aside input, aside.btn { width: 100%; } main { background: #ddd; }
<div class="row"> <aside class="col"> <div> <input type="search" placeholder="Search..."/> </div> <div class="max clip"> <p style="height: 300vh;">Tall paragraph to force some scrollbars</p> </div> <div> <button type="button" class="btn">Add</button> </div> </aside> <main class="max"> App goes here </main> </div>
使 div 以动态宽度填充父 div 的剩余水平空间
[英]Make a div fill the remaining horizontal space of a parent div with a dynamic width
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.