#twitter-bootstrap #bootstrap-5
Вопрос:
Вот код, который у меня сейчас есть — я надеюсь, что «последний элемент» будет виден только после прокрутки окна просмотра контейнера (например,. прокручиваемый). Прямо сейчас он настраивает родительский элемент для размещения, и, таким образом, отображается только основная полоса прокрутки html/тела. Возможно ли это с помощью утилит flexbox? Помогите! 🙂
<div class="container-fluid h-100 ">
<div class="row h-100">
<div class="col">
<div class="h-100 d-flex flex-column">
<div class="row my-3">
<div class="col">
<input type="text" class="form-control form-control-lg" placeholder="Input"
aria-label="First name">
</div>
<div class="col">
<input type="text" class="form-control form-control-lg" placeholder="Input"
aria-label="Last name">
</div>
<div class="col">
<input type="text" class="form-control form-control-lg" placeholder="Last name"
aria-label="Last name">
</div>
</div>
<div class="row mb-3">
<div class="btn-group" role="group" aria-label="Basic outlined example">
<button type="button" class="btn btn-outline-primary p-2 bg-white"
style="border: 1px solid #ced4da">Overview</button>
<button type="button" class="btn btn-outline-primary bg-white"
style="border: 1px solid #ced4da">Tickets</button>
<button type="button" class="btn btn-outline-primary bg-white"
style="border: 1px solid #ced4da">...</button>
</div>
</div>
<div class="row h-100 mb-3 mx-0 ">
<div class="container-fluid h-100">
<div class="row h-100">
<div class="col-4 h-100 p-0 m-0">
<div class="card h-100 border rounded bg-white">
<div class="card-header">
List
</div>
<div class="card-body p-0 m-0">
<div class="list-group h-100 list-group-flush rounded-0">
<div class="h-100 scrollable overflow-auto">
Show item<br>
Show item<br>
Show item<br>
Show item<br>
Show item<br>
Show item<br>
Show item<br>
Show item<br>
Show item<br>
Show item<br>
Show item<br>
Show item<br>
Show item<br>
Show item<br>
Show item<br>
Show item<br>
Show item<br>
Show item<br>
Show item<br>
Show item<br>
Show item<br>
Show item<br>
Show item<br>
Show item<br>
Show item<br>
Show item<br>
Show item<br>
Show item<br>
Show item<br>
Show item<br>
Show item<br>
Show item<br>
Show item<br>
Show item<br>
Show item<br>
Show item<br>
Show item<br>
Show item<br>
Show item<br>
Show item<br>
Show item<br>
Show item<br>
Show item<br>
Show item<br>
Last item<br>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Комментарии:
1. Вы хотите сказать, что хотите, чтобы внутренняя
container-fluidчасть была прокручиваемой, чтобы верхняя форма оставалась видимой? Пожалуйста, уточните, что вы ищете.2. Элемент с классом «прокручиваемый» должен занимать высоту окна просмотра, но его содержимое должно быть прокручиваемым. Имеет смысл?
Ответ №1:
Помните, h-100 что это относительно высоты родителя, и родитель должен иметь определенную высоту. Поэтому используйте vh-100 overflow-hidden элемент, для которого вы хотите использовать высоту видового экрана. Заставьте родителя прокручиваемого контейнера оставаться на этой высоте. Наконец, используйте overflow-auto прокручиваемый элемент…
<div class="container-fluid">
<div class="row">
<div class="col">
<div class="d-flex flex-column vh-100 overflow-hidden">
<div class="row my-3">
<div class="col">
<input type="text" class="form-control form-control-lg" placeholder="Input" aria-label="First name">
</div>
<div class="col">
<input type="text" class="form-control form-control-lg" placeholder="Input" aria-label="Last name">
</div>
<div class="col">
<input type="text" class="form-control form-control-lg" placeholder="Last name" aria-label="Last name">
</div>
</div>
<div class="row mb-3">
<div class="btn-group" role="group" aria-label="Basic outlined example">
<button type="button" class="btn btn-outline-primary p-2 bg-white" style="border: 1px solid #ced4da">Overview</button>
<button type="button" class="btn btn-outline-primary bg-white" style="border: 1px solid #ced4da">Tickets</button>
<button type="button" class="btn btn-outline-primary bg-white" style="border: 1px solid #ced4da">...</button>
</div>
</div>
<div class="row h-100 mb-3 mx-0 overflow-hidden">
<div class="container-fluid h-100">
<div class="row h-100">
<div class="col-4 h-100 p-0 m-0">
<div class="card h-100 border rounded bg-white">
<div class="card-header"> List </div>
<div class="card-body p-0 m-0 overflow-hidden">
<div class="list-group h-100 list-group-flush rounded-0">
<div class="h-100 scrollable overflow-auto"> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Last item<br>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Комментарии:
1. Потрясающе. В этом есть смысл. Похоже, это работает и на моем телефоне. Приму ответ, как только проведу тест дома. Спасибо!