【发布时间】：2021-10-05 13:45:51
【问题描述】：
如何创建一个可滚动的固定侧边栏，直到页脚出现并且兄弟 div 内容结束。 我制作了一个包含一些信息的侧边栏，并在它旁边出现了动态新闻帖子。我想让侧边栏相对于帖子部分固定和可滚动。 结构 od 代码是这样的 1..引导容器 2.. 行 3.. col-4 4..侧边栏在这里.. 5..col-8 6..news在这里发布内容 页面也包含页眉和页脚。
<?php include 'navbar.php'; ?>
<div id="main-content" class="container-fluid">
<div class="row no-gutters" id="pics">
<div class="col-4">
<div class="pic-img"><img src="images/article-img1.jpg" alt=""></div>
</div>
<div class="col-4">
<div class="pic-img"><img src="images/article-img2.jpg" alt=""></div>
</div>
<div class="col-4">
<div class="pic-img"><img src="images/article-img3.jpg" alt=""></div>
</div>
</div>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="index.php">Home</a></li>
<li class="breadcrumb-item active" aria-current="page">Articles</li>
</ol>
</nav>
<div class="row" id="sub-content">
<div class="col-4">
<div id="sidebar">
<div id="search-box">
<input type="text" id="search-input" placeholder="Search blog">
<a type="button" id="search-btn">Search</a>
</div>
<ul id="categories">
<li>Categories</li>
<li><a type="button">Articles</a></li>
<li><a type="button">Life Style</a></li>
<li><a type="button">Health</a></li>
<li><a type="button">Entertainment</a></li>
<li><a type="button">Fashion</a></li>
<li><a type="button">Travel</a></li>
</ul>
<div id="latest-feeds">
<p id="feed-heading">Latest Feeds</p>
<div class="feed-content">
<img src="images/temp3.jpg" alt="">
<div class="feed-info">
<p class="feed-title">This post is about this title get to know</p>
<p class="feed-date">20 September 2021</p>
</div>
</div>
<div class="feed-content">
<img src="images/temp2.jpg" alt="">
<div class="feed-info">
<p class="feed-title">This post is about this title get to know</p>
<p class="feed-date">20 September 2021</p>
</div>
</div>
<div class="feed-content">
<img src="images/temp5.jpg" alt="">
<div class="feed-info">
<p class="feed-title">This post is about this title get to know</p>
<p class="feed-date">20 September 2021</p>
</div>
</div>
<div class="feed-content">
<img src="images/temp4.jpg" alt="">
<div class="feed-info">
<p class="feed-title">This post is about this title get to know</p>
<p class="feed-date">20 September 2021</p>
</div>
</div>
</div>
<ul id="footer-tags">
<li>Tags</li>
<li>
<span>Home</span>
<span>Blog</span>
<span>Post</span>
</li>
<li>
<span>Fashion</span>
<span>Health</span>
<span>Environment</span>
</li>
<li>
<span>Life</span>
<span>Travel</span>
<span>About</span>
</li>
<li>
<span>Sports</span>
<span>Nature</span>
<span>Blogger</span>
</li>
<li>
<span>Category</span>
<span>Art</span>
<span>Fine</span>
</li>
</ul>
</div>
</div>
<div class="col-8">
<div class="row" id="articles">
<div class="col-6">
<div class="post-content">
<a href="#" class="post-img">
<img src="images/temp4.jpg" alt="Image">
</a>
<div class="post-info-container">
<div class="post-info">
<span class="post-category"><a href="#">Category</a></span>
<span class="post-date">20 october 2019</span>
<span class="post-author"><a href="#">By Author</a></span>
</div>
<h4 class="post-title">This Post is about this</h4>
<p class="post-description">Blogging refers to writing, photography, and other media that's self-published online. Blogging started as an opportunity for individuals to write diary-style entries</p>
</div>
</div>
</div>
<div class="col-6">
<div class="post-content">
<a href="#" class="post-img">
<img src="images/temp.jpg" alt="Image">
</a>
<div class="post-info-container">
<div class="post-info">
<span class="post-category"><a href="#">Category</a></span>
<span class="post-date">20 october 2019</span>
<span class="post-author"><a href="#">By Author</a></span>
</div>
<h4 class="post-title">This Post is about this</h4>
<p class="post-description">Blogging refers to writing, photography, and other media that's self-published online. Blogging started as an opportunity for individuals to write diary-style entries</p>
</div>
</div>
</div>
<div class="col-6">
<div class="post-content">
<a href="#" class="post-img">
<img src="images/temp2.jpg" alt="Image">
</a>
<div class="post-info-container">
<div class="post-info">
<span class="post-category"><a href="#">Category</a></span>
<span class="post-date">20 october 2019</span>
<span class="post-author"><a href="#">By Author</a></span>
</div>
<h4 class="post-title">This Post is about this</h4>
<p class="post-description">Blogging refers to writing, photography, and other media that's self-published online. Blogging started as an opportunity for individuals to write diary-style entries</p>
</div>
</div>
</div>
<div class="col-6">
<div class="post-content">
<a href="#" class="post-img">
<img src="images/temp3.jpg" alt="Image">
</a>
<div class="post-info-container">
<div class="post-info">
<span class="post-category"><a href="#">Category</a></span>
<span class="post-date">20 october 2019</span>
<span class="post-author"><a href="#">By Author</a></span>
</div>
<h4 class="post-title">This Post is about this</h4>
<p class="post-description">Blogging refers to writing, photography, and other media that's self-published online. Blogging started as an opportunity for individuals to write diary-style entries</p>
</div>
</div>
</div>
<div class="col-6">
<div class="post-content">
<a href="#" class="post-img">
<img src="images/temp5.jpg" alt="Image">
</a>
<div class="post-info-container">
<div class="post-info">
<span class="post-category"><a href="#">Category</a></span>
<span class="post-date">20 october 2019</span>
<span class="post-author"><a href="#">By Author</a></span>
</div>
<h4 class="post-title">This Post is about this</h4>
<p class="post-description">Blogging refers to writing, photography, and other media that's self-published online. Blogging started as an opportunity for individuals to write diary-style entries</p>
</div>
</div>
</div>
<div class="col-6">
<div class="post-content">
<a href="#" class="post-img">
<img src="images/temp4.jpg" alt="Image">
</a>
<div class="post-info-container">
<div class="post-info">
<span class="post-category"><a href="#">Category</a></span>
<span class="post-date">20 october 2019</span>
<span class="post-author"><a href="#">By Author</a></span>
</div>
<h4 class="post-title">This Post is about this</h4>
<p class="post-description">Blogging refers to writing, photography, and other media that's self-published online. Blogging started as an opportunity for individuals to write diary-style entries</p>
</div>
</div>
</div>
<div class="col-6">
<div class="post-content">
<a href="#" class="post-img">
<img src="images/temp.jpg" alt="Image">
</a>
<div class="post-info-container">
<div class="post-info">
<span class="post-category"><a href="#">Category</a></span>
<span class="post-date">20 october 2019</span>
<span class="post-author"><a href="#">By Author</a></span>
</div>
<h4 class="post-title">This Post is about this</h4>
<p class="post-description">Blogging refers to writing, photography, and other media that's self-published online. Blogging started as an opportunity for individuals to write diary-style entries</p>
</div>
</div>
</div>
<div class="col-6">
<div class="post-content">
<a href="#" class="post-img">
<img src="images/temp2.jpg" alt="Image">
</a>
<div class="post-info-container">
<div class="post-info">
<span class="post-category"><a href="#">Category</a></span>
<span class="post-date">20 october 2019</span>
<span class="post-author"><a href="#">By Author</a></span>
</div>
<h4 class="post-title">This Post is about this</h4>
<p class="post-description">Blogging refers to writing, photography, and other media that's self-published online. Blogging started as an opportunity for individuals to write diary-style entries</p>
</div>
</div>
</div>
<div class="col-6">
<div class="post-content">
<a href="#" class="post-img">
<img src="images/temp3.jpg" alt="Image">
</a>
<div class="post-info-container">
<div class="post-info">
<span class="post-category"><a href="#">Category</a></span>
<span class="post-date">20 october 2019</span>
<span class="post-author"><a href="#">By Author</a></span>
</div>
<h4 class="post-title">This Post is about this</h4>
<p class="post-description">Blogging refers to writing, photography, and other media that's self-published online. Blogging started as an opportunity for individuals to write diary-style entries</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<?php include 'footer.php'; ?>
</body>
</html>
<style>
.post-content img{
height: 320px !important;
}
</style>【问题讨论】：
标签： html css bootstrap-4 css-position sidebar