如图，给导航条所表示的div添加“position”属性然后把导航条的position属性设置为“fixed”，表示的是固定定位了接着我们在设置导航条的“top”属性为0，表示导航条跟浏览器顶部的距离为0，如果是其他数值，则会拉开一些距离总的来说，就是给div设置好fixed，然后top为0就可以固定位置了，非常简单，快去动手练练吧；怎样让一个div高度自适应浏览器高度这个方法就大致分为两种吧，第一种，用CSS的方法 第二种，用JS方法 这里暂时只演示第一种，如果第二种，另外@我 示例代码如下CSS代码第一种写法 html，bodyheight100%margin0**把HTML和BODY的高度设置成100%** divheight100%backgroundcolor#。

简单来说，如果父元素未设置高度或高度为auto，给子元素设置百分比高度就会失效要让百分比高度生效，需要为所有包含子元素的父级元素设定高度，包括body和html元素理解这个规则后，我修改代码，确保所有父级元素都有固定高度这样，设置百分比高度的div元素就能按照预期撑满容器通过这个学习过程，我认识；要让 div 高度自适应，可以采取以下几种方法增加一个清除浮动方法说明在浮动元素之后添加一个清除浮动的元素，这样父容器就能正确地包含所有浮动的子元素，从而知道自身的高度增加一个视觉上不可见的容器方法说明可以在浮动元素之后添加一个高度为0宽度也为0且边框背景等视觉属性都设置为不。

页面高度的设置方法主要取决于你所使用的软件或平台，以下是一些常见场景下的设置方法1 在HTMLCSS中设置网页高度 使用CSS设置固定高度你可以通过CSS的height属性来设置一个元素如ltdivltbody等的固定高度例如，height 100vh会将元素的高度设置为视口高度的100%示例代码ltdiv style=；1新建一个html文件，命名为testhtml，用于讲解jquery怎么设置div高度2在testhtml文件内，引入库文件，成功加载该文件，才能使用jquery中的方法3在testhtml文件内，使用div标签创建一个模块，并使用css设置其宽度为50px，背景颜色为红色4在testhtml文件内。

html固定div的位置

1、首先，我们需要定义一个包含整个页面内容的容器，这个容器应该设置为固定高度和宽度，并且启用垂直滚动条这可以通过以下CSS代码实现content1 overflow hiddenoverflowy scrollSCROLLBARFACECOLOR#205e17SCROLLBARSHADOWCOLOR#86ff92SCROLLBAR3DLIGHTCOLOR#205e17SCROLLBARTRACK。

2、例如，如果有一个DIV需要显示较长的文本或图片，但你希望限制其高度以适应屏幕，你可以设置一个固定高度，如200px当这个DIV的内容超过200px时，overflow scroll属性将自动激活，生成纵向滚动条，方便用户滚动查看内容这种方法不仅能够保持页面布局的整洁，还能提升用户体验值得注意的是，虽然overflow。

3、在DIV+CSS的设计中，标签的使用和限制内容高度是至关重要的首先，需要准备的材料包括电脑浏览器和HTML编辑器例如，打开HTML编辑器，创建一个名为indexhtml的新文件接着，在indexhtml文档的标签内，添加如下代码测试P标签的换行 通过这种方式，可以验证标签的基本功能在浏览器中打开index。

4、2底部定义一个div，固定高度，设置绝对定位positionabsolute，设置下边距bottom03中间定义一个div，设置滚动条自动 overflow auto 设置绝对定位positionabsolute，设置top和bottom，top的值等于头部div的高度，bottom的值等于底部div的高度 示例 lthtmllthead ltmeta。

5、1首先，我们对div设置固定宽度和高度2然后在div里面插入一张图片3插入图片后，在预览中看到的效果，明显图片已经将父级的背景尺寸给盖住了，图片偏大了4然后这个时候，将图片的宽度设置为何父级一样的宽度，代码就是width100%这里的100%会自动跟随父级的宽度选择5这时候回到浏览器中。

6、3浏览器运行indexhtml页面，此时input框的宽度被设置为200px，高度被设备为60px了。

7、4我设置左侧div#site_nav的样式，将其位置固定，即positionfixed，并且设置固定宽度，高度为100%，为了区分右侧内容，我设置了背景颜色background#ffc接着，我将内容部分div#content设置其padding值，注意关键是paddingleft190px，只有大于左侧菜单宽度的padding值，才能使右侧主体内容部分不会与左。

8、1首先新建一个html页面，然后在这个html代码页面创建一个ltdiv标签，同时给这个ltdiv添加一个class类为footer2然后设置footer类，把div固定在底部创建ltstyle标签，在该标签内设置通过position fixedbottom0设置footer类样式，把div固定在底部css样式代码footer height 100pxwidth。

9、1首先创建或者打开我们的web项目，新建一个html文件和css文件即可，如图所示2html页面代码如图所示，定义一个div，然后给一个id属性即可3这里是使用宽度的百分比之后，设置高度值为零，然后使用padding属性的top或者bottom的值可以是任意百分比，背景颜色作为测试4然后在浏览器运行之后的。

10、需要准备的材料分别有电脑浏览器html编辑器1首先，打开html编辑器，新建html文件，例如indexhtml2在indexhtml中的ltbody标签中，输入html代码ltp style=quotwidth 80pxheight 40px overflow hiddenquot测试P标签的换行ltp 3浏览器运行indexhtml页面，此时超过p标签设置高度。

html 设置div高度

以 43 为例， 想要DIV按照这个宽高比，在网页中随着横向的伸缩，在纵向上等比伸缩， 用一个外围DIV来包裹它，且将这个外围DIV称之为Wrapper， Wrapper 的CSS样式如下这个Wrapper的宽高比就是 43 ， 其中的奥妙就在于 paddingbottom75% ， paddingbottom 是相对宽度的也就是整个Wrapper的高度。

1将底部的DIV定位属性设为fixed PSposition属性的值为fixed，与内容高度和多少无关，相对于窗口来定位，即便页面滚动，它还是会停留在相同的位置2举例 footerposition fixedbottom 0width100%height30px通过bottom值来调整距离底部的距离 3如果被面上的层压住不显示，设置一。