存在滚动条时，Bootstrap 4 侧边栏列被切断答案

【问题标题】：Bootstrap 4 sidebar column gets cut off when scrollbar is present存在滚动条时，Bootstrap 4 侧边栏列被切断
【发布时间】：2020-06-15 19:55:54
【问题描述】：

我有一列用于侧边栏。即使内容没有滚动条，我也希望侧边栏为 100% 高度。

如果我在行中添加vh-100，如果页面滚动，它将被切断。

如果我在 html、正文、容器和行上使用 h-100，它也会被切断。

我也在行上尝试了mh-100 并且发生了相同的结果。

示例：https://jsfiddle.net/L0cxhred/

如何使侧边栏始终为页面的 100% 高度，并且在存在滚动条时不会被截断？最好使用 bootstrap 4 提供的功能。

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

尝试将 position-fixed 添加到您的 div 内容中，并声明 col 大小，就像这个例子一样。我添加了一个带有边距的类 .content-side 来分隔你的列。

.content-side{
    margin-left: 30%;
}

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="csrf-token" content="6cVeUL8545aLqj1Fo8zZCGwhxzbZP5bsS4oPK5cG">
    
    
    <link rel="stylesheet" href="style.css">
    
    
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/css/all.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css">

    <title>Home | Larapi</title>
</head>
<body>
    <div class="container-fluid d-flex justify-content-around">
        <div class="row mx-0">
            <div class="position-fixed col-md-3 col-sm-3 bg-dark text-light vh-100">
                <h4 class="my-4 mx-3">
                    <a href="#" class="text-decoration-none">
                        <i class="fab fa-laravel text-light"></i>
                        <span class="text-light">Larapi</span>
                    </a>
                </h4>

                <h6 class="small text-uppercase mx-3">Models</h6>

                <ul class="list-unstyled">
                    <li>
                        <a href="#" class="btn btn-block btn-primary text-left pr-3">
                            <i class="fas fa-fw fa-cog"></i>
                            Model
                        </a>
                    </li>
                    <li>
                        <a href="#" class="btn btn-block btn-link text-left text-light text-decoration-none pr-3">
                            <i class="fas fa-fw fa-cog"></i>
                            Model Name
                        </a>
                    </li>
                </ul>

                <h6 class="small text-uppercase mx-3">Admin</h6>

                <ul class="list-unstyled">
                    <li>
                        <a href="#" class="btn btn-block btn-link text-left text-light text-decoration-none pr-3">
                            <i class="fas fa-fw fa-cog"></i>
                            Models
                        </a>
                    </li>
                    <li>
                        <a href="#" class="btn btn-block btn-link text-left text-light text-decoration-none pr-3">
                            <i class="fas fa-fw fa-cog"></i>
                            Files
                        </a>
                    </li>
                    <li>
                        <a href="http://larapi.test/logout" class="btn btn-block btn-link text-left text-light text-decoration-none pr-3">
                            <i class="fas fa-fw fa-sign-out-alt"></i>
                            Logout
                        </a>
                    </li>
                </ul>
            </div>
            <div class="col-md-8 col-sm-8 content-side">
                <div class="p-4">
                    <h1 class="mb-3">Home</h1>

				    <p>You are logged in!</p>

				    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, vel, veritatis! Ad, beatae consequatur cum cumque et exercitationem fuga laudantium nisi, nulla numquam odio omnis qui quod, similique sit vel?</p>

					<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
					<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
					<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
					<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
				    
				    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, vel, veritatis! Ad, beatae consequatur cum cumque et exercitationem fuga laudantium nisi, nulla numquam odio omnis qui quod, similique sit vel?</p>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.bundle.min.js"></script>
</body>
</html>

【讨论】：

【解决方案2】：

将min-vh-100 添加到行中。

【讨论】：