我有一个与this帖子非常相似的问题,除了我想使用bootstrap的flex
作为tab-content
的"动态" height
。下面的代码为整个页面生成一个滚动条,但我只想让tab-pane
内的内容可以滚动(内部滚动条)。
- Edit I:*
tab-content
应该占用剩余的可用空间。我以为flex-grow-1
fortab-content
结合h-100
fortab-pane
会做到这一点。但事实并非如此。
谢谢你的建议。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"
integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"
integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm"
crossorigin="anonymous"></script>
</head>
<body>
<div class="d-flex flex-row" style="min-height: 100vh; max-height: 100vh;">
<div class="d-flex flex-column flex-grow-1">
<nav>
<div class="nav nav-tabs" id="nav-tab" role="tablist">
<a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab"
aria-controls="nav-home" aria-selected="true">Home</a>
</div>
</nav>
<div class="tab-content flex-grow-1" id="nav-tabContent">
<div class="tab-pane fade show active d-flex flex-column h-100" id="nav-home" role="tabpanel"
aria-labelledby="nav-home-tab">
<div class="flex-grow-1" style="overflow-y: scroll">
<p>Ethical Kickstarter PBR asymmetrical lo-fi. Dreamcatcher street art Carles, stumptown
gluten-free Kickstarter artisan Wes Anderson wolf pug. Godard sustainable you probably haven't heard of them, vegan
farm-to-table
Williamsburg slow-carb readymade disrupt deep v. Meggings seitan Wes Anderson semiotics,
cliche American
Apparel whatever. Helvetica cray plaid, vegan brunch Banksy leggings +1 direct trade.
Wayfarers codeply
PBR
selfies. Banh mi McSweeney's Shoreditch selfies, forage fingerstache food truck occupy YOLO
Pitchfork
fixie
iPhone fanny pack art party Portland.
Ethical Kickstarter PBR asymmetrical lo-fi. Dreamcatcher street art Carles, stumptown
gluten-free
Kickstarter
</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
2条答案
按热度按时间shyt4zoc1#
这是我的解决方案。添加以下代码到您的css文件。希望它会对您有帮助。如果您遇到进一步的问题,请随时通知。
它允许你的标签内容占据剩下的区域,因为你的标题占据了屏幕高度的10%,所以你还有90%的空间。
x一个一个一个一个x一个一个二个x
6jygbczu2#
我使用下面的问题/示例为Bootstrap 5做到了这一点:how to scroll content of flex row that is flex-grow-1。选项卡窗格中的任何长内容都会创建一个垂直滚动条,而导航条保持不变。
这应该适用于Bootstrap 4,方法是将g-0替换为无间距。