在前端开发中，有时我们需要将一个 div 元素固定在屏幕顶部，并且保持着一直拉到底部的效果。这种效果在导航栏、侧边栏等场景下非常常见。本文将介绍如何通过 CSS 实现这种效果。
1. 使用 position: fixed;
要让一个 div 元素固定在屏幕顶部，并且不随页面滚动而移动，可以使用 CSS 中的 position: fixed; 属性。该属性会让元素脱离文档流，并相对于视口（viewport）进行定位。例如：
------ - --------- ------ ---- -- ----- -- -
上面的代码会将 id 为 myDiv 的元素固定在屏幕左上角。其中，top 和 left 属性用来指定元素距离视口上方和左侧的距离。如果想让元素距离屏幕右侧和底部固定，可以使用 right 和 bottom 属性。例如：
------ - --------- ------ ------- -- ------ -- -
上面的代码会将 myDiv 元素固定在屏幕右下角。
2. 使用 height: 100vh;
要让一个 div 元素一直拉到屏幕底部，可以使用 CSS 中的 height: 100vh; 属性。该属性将元素的高度设置为视口高度的百分之百。例如：
------ - --------- ------ ---- -- ----- -- ------- ------ -
上面的代码会将 id 为 myDiv 的元素固定在屏幕顶部，并且高度一直拉到底部。
3. 结合使用
要实现一个完整的效果，需要将上述两种方法结合起来使用。例如：
------ - --------- ------ ---- -- ----- -- ------- ------ -
上面的代码会将 id 为 myDiv 的元素固定在屏幕顶部，并且高度一直拉到底部。
4. 示例代码
下面是一个完整的示例代码：
--------- -----
------
------
----- ----------------
------------ -----------
-------
------- -
--------- ------
---- --
----- --
------ -----
----------------- -----
------ -----
-------- -----
---------- -----
-
-------- -
--------- ------
---- --
------ --
------ ------
------- ------
----------------- -----
-------- -----
---------- -----
-
-------- -
----------- -----
------------- ------
-------- -----
---------- -----
-
--------
-------
------
---- ---------------------
---- ----------------------
---- -------------
-------------
--------------
------
-------
-------上面的代码实现了一个具有固定导航栏和侧边栏的页面效果。其中，navbar 和 sidebar 分别使用了 position: fixed; 属性来实现固定在
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/8787