如何让一个 div 元素固定在屏幕顶部并保持一直拉到底部？

在前端开发中，有时我们需要将一个 div 元素固定在屏幕顶部，并且保持着一直拉到底部的效果。这种效果在导航栏、侧边栏等场景下非常常见。本文将介绍如何通过 CSS 实现这种效果。

1. 使用 position: fixed;

要让一个 div 元素固定在屏幕顶部，并且不随页面滚动而移动，可以使用 CSS 中的 position: fixed; 属性。该属性会让元素脱离文档流，并相对于视口（viewport）进行定位。例如：

#myDiv {
  position: fixed;
  top: 0;
  left: 0;
}

上面的代码会将 id 为 myDiv 的元素固定在屏幕左上角。其中，top 和 left 属性用来指定元素距离视口上方和左侧的距离。如果想让元素距离屏幕右侧和底部固定，可以使用 right 和 bottom 属性。例如：

#myDiv {
  position: fixed;
  bottom: 0;
  right: 0;
}

上面的代码会将 myDiv 元素固定在屏幕右下角。

2. 使用 height: 100vh;

要让一个 div 元素一直拉到屏幕底部，可以使用 CSS 中的 height: 100vh; 属性。该属性将元素的高度设置为视口高度的百分之百。例如：

#myDiv {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
}

上面的代码会将 id 为 myDiv 的元素固定在屏幕顶部，并且高度一直拉到底部。

3. 结合使用

要实现一个完整的效果，需要将上述两种方法结合起来使用。例如：

#myDiv {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
}

上面的代码会将 id 为 myDiv 的元素固定在屏幕顶部，并且高度一直拉到底部。

4. 示例代码

下面是一个完整的示例代码：

-- -------------------- ---- -------
--------- -----
------
------
  ----- ----------------
  ------------ -----------
  -------
    ------- -
      --------- ------
      ---- --
      ----- --
      ------ -----
      ----------------- -----
      ------ -----
      -------- -----
      ---------- -----
    -

    -------- -
      --------- ------
      ---- --
      ------ --
      ------ ------
      ------- ------
      ----------------- -----
      -------- -----
      ---------- -----
    -

    -------- -
      ----------- -----
      ------------- ------
      -------- -----
      ---------- -----
    -
  --------
-------
------
  ---- ---------------------
  ---- ----------------------
  ---- -------------
    -------------
    --------------
  ------
-------
-------

上面的代码实现了一个具有固定导航栏和侧边栏的页面效果。其中，navbar 和 sidebar 分别使用了 position: fixed; 属性来实现固定在

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/8787