此问题在此处已有答案：
Why don't flex items shrink past content size?（5个答案）
4个月前关闭。
我希望有一个固定的页眉和页脚，并且页眉和页脚之间的内容始终使用全高，所以我添加了一个三行的Flexbox布局。
如果内容太长，左边的内容栏必须滚动（overflow-y：auto），但是100%的高度不起作用。如果不计算真实的高度，比如100 vh减去页眉+页脚，这可能吗？
<!doctype html>
<html lang="en" class="h-100">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet" />
<style>
div[class^="col"] {
padding-top: .75rem;
padding-bottom: .75rem;
background-color: rgba(112.520718, 44.062154, 249.437846, 0.1);
border: 1px solid rgba(112.520718, 44.062154, 249.437846, 0.25);
}
.content {
flex: 1;
}
.inner-content {
overflow-y: auto;
background-color: red;
}
</style>
</head>
<body class="d-flex flex-column h-100">
<header>
<div class="container">
<nav class="navbar sticky-top">
<a class="navbar-brand" href="#">Fixed navbar</a>
</nav>
</div>
</header>
<main class="content">
<div class="container-fluid h-100">
<div class="row h-100">
<div class="col h-100 p-0">
<div class="h-100 inner-content">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
</div>
<div class="col">col</div>
</div>
</div>
</main>
<footer class="footer mt-auto py-3 bg-light">
<div class="container">
<span class="text-muted">Place sticky footer content here.</span>
</div>
</footer>
<script src="js/bootstrap.bundle.min.js"></script>
</body>
</html>
1条答案
按热度按时间zsbz8rwp1#
您需要在内容上添加一个最小高度//查看重复为什么弹性项目不收缩超过内容大小？