UI新手求助：Bootstrap4博客布局如何实现Div固定滚动及全屏横幅？

嘿，作为刚接触UI的新手，用Bootstrap 4搭博客布局确实得先把基础布局逻辑捋顺，我来一步步帮你搞定这几个核心需求：

这个需求分两种常见场景，咱们分别说：

场景1：侧边栏固定 + 主内容区滚动 #

如果你的第一个Div是侧边导航，第二个是博客主内容区，可以这么写：

<!-- 固定的侧边栏Div -->
<div class="fixed-sidebar">
  <h3>我的博客导航</h3>
  <ul class="list-unstyled">
    <li><a href="#">首页</a></li>
    <li><a href="#">技术文章</a></li>
    <li><a href="#">生活杂谈</a></li>
  </ul>
</div>

<!-- 可滚动的主内容Div -->
<div class="scrollable-content">
  <article class="mb-5">
    <h2>第一篇博客标题</h2>
    <p>这里放大量文章内容...（多复制几段，就能看到滚动效果啦）</p>
  </article>
  <article class="mb-5">
    <h2>第二篇博客标题</h2>
    <p>这里放更多文章内容...</p>
  </article>
</div>

搭配自定义CSS（放在<style>标签或外部样式文件里）：

.fixed-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: 260px;
  height: 100vh; /* 占满整个浏览器视口高度 */
  background-color: #f8f9fa;
  padding: 1.5rem;
  z-index: 1000; /* 确保侧边栏不会被其他内容覆盖 */
}

.scrollable-content {
  margin-left: 260px; /* 给侧边栏留出宽度，避免内容被遮挡 */
  min-height: 100vh;
  padding: 1.5rem;
  overflow-y: auto; /* 内容超出时自动显示垂直滚动条 */
}

场景2：顶部导航固定 + 下方内容滚动 #

如果第一个Div是顶部导航栏，更简单，Bootstrap 4自带fixed-top类，直接用：

<!-- 固定的顶部导航Div -->
<div class="fixed-top bg-dark text-white p-3">
  <h3>我的博客</h3>
</div>

<!-- 可滚动的内容Div -->
<div class="pt-5 mt-3"> <!-- pt-5和mt-3是为了给顶部导航留出空间 -->
  <!-- 博客内容同上面的示例 -->
</div>

全屏横幅就是占满整个浏览器视口的头部区域，用Bootstrap的flex类搭配自定义样式就能实现：

<div class="hero-banner">
  <div class="container h-100 d-flex align-items-center justify-content-center">
    <div class="text-center text-white">
      <h1 class="display-4 fw-bold">我的技术博客</h1>
      <p class="lead mt-3">分享前端开发心得与生活感悟</p>
    </div>
  </div>
</div>

对应的CSS：

.hero-banner {
  height: 100vh; /* 占满视口高度 */
  background: url('你的横幅背景图地址') center/cover no-repeat; /* 替换成你自己的背景图 */
  background-color: #343a40; /* 背景图加载失败时的备用颜色 */
}

额外小提示 #

• 响应式适配：在手机等小屏幕上，固定侧边栏会占满宽度影响体验，可以加媒体查询调整：

  @media (max-width: 768px) {
    .fixed-sidebar {
      position: relative;
      width: 100%;
      height: auto;
    }
    .scrollable-content {
      margin-left: 0;
    }
  }
  

• 滚动条美化：如果觉得默认滚动条不好看，可以用CSS自定义样式（可选）。

内容的提问来源于stack exchange，提问作者Ricky