CSS 滚动内容的div，其他应该是固定的

在本文中，我们将介绍如何使用CSS创建一个只有内容可滚动的div，而其他元素则保持固定。这在网页设计中非常常见，尤其是当页面有固定的导航栏、页眉和页脚时。我们将使用CSS的position和overflow属性来实现这个效果。

阅读更多：CSS 教程

实现固定和滚动的布局

首先，让我们创建一个简单的HTML结构来演示这个布局。我们将有一个固定的导航栏、页眉和页脚，而中间的内容区域将是可滚动的。以下是HTML代码：

<div class="navbar">
  <!-- 导航栏内容 -->
</div>

<header>
  <!-- 页眉内容 -->
</header>

<main class="content">
  <!-- 内容区域的滚动部分 -->
  <div class="scrollable">
    <!-- 内容的固定部分 -->
  </div>
</main>

<footer>
  <!-- 页脚内容 -->
</footer>

接下来，我们使用CSS来为这个布局添加样式。我们将使用position: fixed来使导航栏、页眉和页脚固定在页面的顶部、底部和底部。为了使内容区域可滚动，我们将使用overflow: auto。

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  /* 其他样式 */
}

header {
  position: fixed;
  top: 50px; /* 为了避免导航栏遮挡页眉 */
  left: 0;
  width: 100%;
  /* 其他样式 */
}

main.content {
  position: relative;
  margin-top: 100px; /* 为了避免导航栏和页眉遮挡内容 */
  margin-bottom: 100px; /* 为了避免页脚遮挡内容 */
}

.scrollable {
  height: 400px; /* 如果内容很长，可以调整高度 */
  overflow: auto;
  /* 其他样式 */
}

footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  /* 其他样式 */
}

在上面的示例中，我们使用了position: fixed来指定元素的固定定位，然后使用top、bottom、left和width等属性来定位和控制元素的大小。对于内容区域，我们添加了overflow: auto来实现滚动效果。通过调整margin值，我们可以确保固定元素不会遮挡滚动元素的内容。

示例说明

假设我们有一个网站的页面布局如上所示。导航栏固定在页面的顶部，页眉在导航栏下方，页脚固定在页面的底部。在内容区域内部，我们有一些动态生成的内容，如果超过了指定的高度，就会出现滚动条。

<div class="navbar">
  <ul>
    <li>导航菜单1</li>
    <li>导航菜单2</li>
    <li>导航菜单3</li>
  </ul>
</div>

<header>
  <h1>我的网站</h1>
</header>

<main class="content">
  <div class="scrollable">
    <h2>欢迎来到我的网站</h2>
    <p>这里是我的网站的首页。欢迎浏览我的最新文章和项目。</p>
    <h3>最新文章</h3>
    <ul>
      <li>文章1</li>
      <li>文章2</li>
      <li>文章3</li>
      <!-- 更多文章 -->
    </ul>
    <!-- 更多内容 -->
  </div>
</main>

<footer>
  <p>版权所有 © 2022 我的网站</p>
</footer>

使用上述的CSS样式，我们可以在浏览器中看到网页的布局效果。导航栏、页眉和页脚将固定在页面的相应位置，而内容区域的div将显示滚动条，以便在内容过长时进行滚动浏览。