我在一个博客上工作，我希望在左边的博客文章，在右边的管理员，在本质上是一个完整的博客（用户/开发人员）在一个页面上的界面，但我希望开发人员的一面是可滚动的，用户界面是固定的。
看一下css
.h-100-vh {
height: 100vh !important;
overflow-y: hidden;
}
.scroll-y {
overflow-y: auto !important;
overflow-x: hidden !important;
}
.rounded-xxlg-top {
border-top-left-radius: 14px;
border-top-right-radius: 14px;
}
.rounded-xxlg-bottom {
border-bottom-left-radius: 14px;
border-bottom-right-radius: 14px;
}
.nav-tabs .nav-link.active {
color: white !important;
background-color: #007bff !important;
}一些html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Wicked Blog</title>
<link rel="stylesheet" href="assets/bootstrap-4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/font-awesome-4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="assets/css/custom.css">
</head>
<body>
<div class="container-fluid" style="position: sticky;">
<div class="row mt-3">
<div class="col-md-8 blog-left">
<div class="shadow-sm">
<div class="header py-3 bg-primary text-center rounded-xxlg">
<img src="assets/media/images/brand/logo/logoBW.png" width="140" alt="" class="img-fluid">
<h1 class="text-white mt-3">Welcome to <span>Wicked Blog</span></h1>
</div>
<main class="py-5">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit cumque sint debitis quaerat explicabo optio in ipsa aliquid? Quaerat culpa suscipit impedit libero obcaecati ex. Nulla sed, quis amet ex quas itaque quo, facilis voluptatem quaerat nobis omnis autem ducimus doloribus corrupti voluptas minima illum suscipit sit perspiciatis ut placeat earum, ab ullam et? Veniam deserunt exercitationem porro impedit quisquam aspernatur, ducimus quos ipsum quibusdam ad quidem temporibus velit eveniet magni officiis, voluptate incidunt ex, eligendi sequi quae facere eaque neque quia commodi. Dolorum consequatur est harum possimus quis beatae repellat quibusdam laborum sed nesciunt facere voluptatem officia quas exercitationem, necessitatibus atque eos, nulla dolores sint. Nobis iste magni cupiditate fugit consequatur aliquid rerum atque debitis cumque exercitationem inventore non at ducimus rem, beatae nostrum minus, voluptatem ipsa? Molestiae, non. Debitis, quis.</p><br>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit cumque sint debitis quaerat explicabo optio in ipsa aliquid? Quaerat culpa suscipit impedit libero obcaecati ex. Nulla sed, quis amet ex quas itaque quo, facilis voluptatem quaerat nobis omnis autem ducimus doloribus corrupti voluptas minima illum suscipit sit perspiciatis ut placeat earum, ab ullam et? Veniam deserunt exercitationem porro impedit quisquam aspernatur, ducimus quos ipsum quibusdam ad quidem temporibus velit eveniet magni officiis, voluptate incidunt ex, eligendi sequi quae facere eaque neque quia commodi. Dolorum consequatur est harum possimus quis beatae repellat quibusdam laborum sed nesciunt facere voluptatem officia quas exercitationem, necessitatibus atque eos, nulla dolores sint. Nobis iste magni cupiditate fugit consequatur aliquid rerum atque debitis cumque exercitationem inventore non at ducimus rem, beatae nostrum minus, voluptatem ipsa? Molestiae, non. Debitis, quis.</p><br><br>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit cumque sint debitis quaerat explicabo optio in ipsa aliquid? Quaerat culpa suscipit impedit libero obcaecati ex. Nulla sed, quis amet ex quas itaque quo, facilis voluptatem quaerat nobis omnis autem ducimus doloribus corrupti voluptas minima illum suscipit sit perspiciatis ut placeat earum, ab ullam et? Veniam deserunt exercitationem porro impedit quisquam aspernatur, ducimus quos ipsum quibusdam ad quidem temporibus velit eveniet magni officiis, voluptate incidunt ex, eligendi sequi quae facere eaque neque quia commodi. Dolorum consequatur est harum possimus quis beatae repellat quibusdam laborum sed nesciunt facere voluptatem officia quas exercitationem, necessitatibus atque eos, nulla dolores sint. Nobis iste magni cupiditate fugit consequatur aliquid rerum atque debitis cumque exercitationem inventore non at ducimus rem, beatae nostrum minus, voluptatem ipsa? Molestiae, non. Debitis, quis.</p>
</main>
</div>
</div>
<div class="col-md-4 blog-right shadow-lg">
<!-- Tab panes -->
<div class="tab-content px-3 py-4">
<?php if(isset($_GET['avw']) && $_GET['avw'] == 'new-blog'): ?>
<div class="tab-pane active">
<form action="" method="post">
<div class="form-group">
<label>Title</label>
<input type="text" class="form-control" placeholder="Enter Title">
</div>
<div class="form-group">
<label>Content</label>
<textarea name="content" class="form-control" cols="30" rows="5"></textarea>
</div>
<div class="form-group form-check">
<label>Category</label>
<select name="category" id="category" class="form-control form-select">
<option value="">--Pick Category--</option>
<option value="">option</option>
</select>
</div>
<div class="form-group">
<label for="">Cover Image</label>
<input type="file" name="coverImage" class="form-control form-control-file">
</div>
<div class="preview-box p-5 m-5 bg-dark">
</div>
<div class="text-center">
<button type="submit" name="saveBlog" class="btn btn-success">Save</button>
<button type="reset" class="btn btn-danger">Cancel</button>
</div>
</form>
</div>
<?php endif ?>
</div>
</div>
</div>
</div>
</div>
</body>
</html>我试着给予整个页面一个高度并使用overflow-y属性，我也试过position：fixed prop，但没有变化，整个页面仍然是可滚动的
1条答案
按热度按时间xzabzqsa1#
这就是你可能想要的：
看看它的工作：
每个栏目有多少内容并不重要。当它的内容不再适合高度时，它开始可滚动：
最重要的是，您可能希望将上面的整个CSS Package 在
...所以这种分屏只发生在
md及以上版本上（如第二个示例）。