上方固定，下方滚动

最新推荐文章于 2023-05-15 11:54:53 发布
最新推荐文章于 2023-05-15 11:54:53 发布
阅读量1.6k 收藏 4
点赞数 2
分类专栏： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_24713805/article/details/77151778
版权

在工作中学到了，对一个页面实现上方导航固定，下方内容滚动的功能，所以在这与大家分享一下，

        其中，我主要用的是position：absolute；

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>结账数据信息展示</title>
<style type="text/css">
html,body{
	padding: 0;
	margin: 0;
}
.head{
	position: absolute;
	top: 0;
	border: 1px solid #000;
	width: 100%;
	height: 20rem;
}
.contant{
	width:100%;
	position: absolute;
	top: 20rem;
	bottom: 0;
	overflow: hidden; /*外部不滚动，内部滚动，内容超出隐藏*/
	border:1px solid #000;
}
.left{
	width: 100%;
	height: 100%;     /*高度填满外部*/
	overflow: auto;
	overflow-y:scroll;/*内部滚动*/

}

</style>
<body>
	<div class="head"></div>
	<div class="contant">
		<div class="left">
		 <p>1</p>
		 <p>1</p>
		 <p>1</p>
		 <p>1</p>
		 <p>1</p>
		 <p>1</p>
		 <p>1</p>
		 <p>1</p>
		 <p>1</p>
		 <p>1</p>
		 <p>1</p>
		 <p>1</p>
		 <p>1</p>
		 <p>1</p>
		 <p>1</p>
		 <p>1</p>
		 <p>1</p>
		 <p>1</p>
		 <p>1</p>
		 <p>1</p>
		 <p>1</p>
		 <p>1</p>
		 <p>1</p>
		 <p>1</p>
		 <p>1</p>
		 <p>1</p>
		 <p>1</p>
		 <p>1</p>
		 <p>1</p>
		 <p>1</p>
		 <p>1</p>
		</div>
	</div>
</body>
</html>

css中border只是为了显示位置，可以去掉。效果如下，下方出现滚动条，可以滚动。

天空之枫
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【Web前端实操18】粘性定位——即固定顶层内容，可以继续滚动，但是顶层内容固定，不随着一起滚动
qq_45498824的博客
01-29 1574
大家可以在翻看一些网页页面的时候，看到搜索栏那一块内容，在当前页面不动的时候，它是固定的，也不变动，这个时候是相对定位。在最开始的时候，图片在最顶层，导航栏在图片下面一行，但是，在滚动的时候图片会滑上去，但是导航栏位置不变，固定在顶层。元素在跨越特定阈值前为相对定位，之后为固定定位。但是往下滚动的时候，内容随之变化，但是搜索栏这一块内容会固定在顶部，又变换成固定定位。我们大体上一个大块中分为三块，最下面一块可以先不写内容，但是需要用高度将它撑开。本次博文主要实现的就是粘性定位，介于两种定位之间的定位。
顶部固定不动 下部分滚动_设计技巧｜一键轻松实现长页面滚动，精确定位
weixin_39517560的博客
12-10 898
高保真设计稿制作的过程中，常常需要用到长页面滚动，没有原型设计工具该怎么办呢？使用摹客iDoc可以轻松实现这一效果！同时，本次更新，iDoc插件在Sketch中的上传速度也提升了好几倍。一起来看看吧！关键信息利用iDoc轻松实现长页面滚动手动输入像素值，精确定位摹客iDoc Sketch插件极速上传利用iDoc轻松实现长页面滚动App页面设计内经常会需要固定顶部导航、底部导航，以及一些长内容页内部...
iframe 上下滚动条如何默认在下方实现原理
09-05
iframe 上下滚动条如何默认在下方，做的是聊天工具，数据多了，每次刷新出现的上下滚动默认在上方，还需下拉到下面才能看到聊天记录，本文将介绍，如和实现在下方
页面布局，固定头部，滚动下方内容
qq_32440951的博客
01-01 3321
实际场景 在制作页面的时候，经常会遇到要这样的情况：整个页面，整体分三大模块，头部固定，内容区域，左边固定，右边可以滚动。 最终想要的效果   &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;css固定div头部，滚动
CSS 在div最外层添加向下的滚动条，在内层嵌套向左的滚动条
weianl的博客
07-19 3647
首先我们最外层设了个大div，内层设置了一个小div，内层div要设置高度，不然滚动条overflow: auto;属性不生效，然后内层div的高度要超出屏幕外，我们这里给了1000px，不然更换屏幕很长的设备类容会少了一截，并不是我们想要的效果，然后如果底部有切换栏的话，加个边距和切换栏的高度一样就不会遮住内容了。 html： <div class="father"> &l...
css3动画之左右摇摆
热门推荐
super_ce的博客
01-09 3万+
@-webkit-keyframes zy{   10% {     transform: rotate(15deg);   }   20% {     transform: rotate(-10deg);   }   30% {     transform: rotate(5deg);   }   40% {     transform: rotate(-5deg);  
实现上面固定下面滚动效果
m0_53912016的博客
02-23 433
【代码】实现上面固定下面滚动效果。
CSS实现上半内容高度动态变化，下半自动填满且内部嵌套可滚动区域
西木的博客
08-31 1666
左侧栏使用flex布局，query区域不做任何限制，高度可以变化。下半部分query-data部分使用flex-grow: 1使其可以填满左侧栏剩余部分空间。query-data的header为固定高度，所以可滚动区域需使用绝对定位相对query-data容器进行定位（query-data容器需position: relative），top设为header的高度。......
css解决使用固定定位导致下方元素上移到固定定位元素的位置
黑帽子技术的博客
10-07 2372
问题描述 固定定位相对于视口定位，如果上方有一个div元素，开启固定定位以后，这个div就会脱离文档流（“漂浮走了”），那么原来的这个div所占据的位置，就会空出来，就会导致下方的div元素蹿升上来。就会导致布局的紊乱。解决方式...
HTML页面上面固定下面滚动的实现
lcathm的专栏
12-15 4696
http://blog.chinaunix.net/uid-14767524-id-2785539.html 在页面设计时，有时会碰到上边一小部分要固定（比如是一个动态生成的标题，高度不确定），而下边的具体内容则需要滚动显示的情形(在不使用框架集合的情况下)，今天自己试着写了一下，代码如下： http://www.w3.org/1999/xhtml">      CSS Test   
vue tab滚动到一定高度,固定在顶部,点击tab切换不同的内容操作
10-15
主要介绍了vue tab滚动到一定高度,固定在顶部,点击tab切换不同的内容操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
导航栏滚动到顶部后固定
07-16
导航栏滚动到页面顶部后，固定，并处于所有的页面元素上方，浮动显示。
c#之滚动字幕动画窗体的实现详解
09-05
本篇文章是对c#中滚动字幕动画窗体的实现方法进行了详细的分析介绍，需要的朋友参考下
css中怎么给div设置一个从上到下的滚动动画
m0_68094390的博客
05-15 4667
在上面的代码中，scroll-div是需要滚动的div，设置了固定的高度和overflow:hidden属性。然后定义了一个名为scroll的动画，使用translateY()函数实现从上到下的滚动效果。首先，给需要滚动的div设置一个固定的高度和overflow属性为hidden，这样可以隐藏超出高度的内容。在@keyframes中，定义从上到下的滚动动画，可以使用translateY()函数来实现垂直方向的移动。可以使用CSS的动画属性来实现从上到下的滚动动画。
div中打开滚动条与设置滚动条位置
暄妍丶的博客
10-22 7442
div中打开滚动条与设置滚动条位置一、给div设置滚动条二、设置滚动条的位置通过锚点跳转设置scrollTop的值 当我们给div设置固定的高度或宽度的时候,超出的内容默认是不显示的.但是我们有将他们显示出来的需求,比如自己做一个,这时候我们就需要给div加上滚动条了 一、给div设置滚动条 我们只需要这么一行css代码 overflow: scroll; 如果我们只想添加高度滚动条,我们可以使用下面的语句 /*设置纵向滚动栏*/ overflow-x: scroll; /*设置横向滚动栏*/ overf
【CSS】固定顶部和底部，中间部分滚动展示
coralime的博客
03-09 4623
写页面的时候经常遇到需要固定顶端和底部，中间内容自动撑开，超过屏幕大小可以自动滚动显示。 实现很简单，通过flex布局固定顶端和底部的高度，中间内容自动撑开，可以解决。 【CSS】 <style> html, body { height: 100%; margin: 0; } ...
固定DIV于页面底部和滚动条一起滚动
yorksome的博客
07-11 1656
CSS固定div且随滚动条滚动 项目需求是将二维码固定在页面上，随页面滑动。 弱点：css position 值及其对应的效果。 .QRcode{ display:block; bottom:10px; right:20px; width:110px; height:120px; position:fixed; } ...
css实现固定区域的上下滑动(vue基础实践案例)
Sunday97的博客
08-25 3192
dsdwdwd
类似导航栏顶部固定，下面内容滚动的样式怎么写
最新发布
05-28
这种效果可以通过CSS中的`position`属性和`z-index`属性来实现。 首先，将导航栏的`position`属性设置为`fixed`，这样导航栏就会固定在页面顶部不动，不会随页面滚动而滚动。 然后，将下面内容的`margin-top`属性设置成导航栏的高度，这样下面内容就会从导航栏下方开始展示。 最后，为导航栏设置一个比下面内容的`z-index`更高的值，这样导航栏就会在下面内容上方展示。 示例代码如下： HTML: ``` <header> <!-- 导航栏内容 --> </header> <main> <!-- 页面主体内容 --> </main> ``` CSS: ``` header { position: fixed; top: 0; left: 0; width: 100%; z-index: 9999; /* 比下面内容的z-index更高 */ } main { margin-top: 60px; /* 导航栏高度 */ } ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值