简单实现顶部固定，中部自适应布局

最新推荐文章于 2023-03-11 16:24:00 发布
最新推荐文章于 2023-03-11 16:24:00 发布
阅读量130 收藏 1
点赞数
原文链接：http://www.cnblogs.com/Sroot/p/7636851.html
版权

        最近在重构web导航的时候就发现一个问题，如何实现顶部固定，中部自适应的布局。

        很多人会认为这很简单啊，顶部使用position: fixed;就可以实现。

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <title>顶部固定，中部自适应</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        
        .hd {
            position: fixed;
            z-index: 99;
            top: 0;
            width: 100%;
            height: 20px;
            padding: 15px 0;
            text-align: center;
            color: #fff;
            background: #f00;
        }
        
        .bd {
            width: 100%;
            margin-top: 50px;
            padding: 15px 0;
            text-align: center;
            color: #fff;
            background: #00f;
        }
    </style>
</head>

<body>
    <header class="hd">
        我是固定头部
    </header>
    <div class="bd">
        我是中部部分
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
    </div>
</body>

</html>

这种做法确实简单，但是，请看清题目，顶部固定，中部自适应。（顶部不包括滚动条）

花了一点时间的思考，终于想出来了，中部使用position:absolute;就可以实现。

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <title>顶部固定，中部自适应</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        
        .hd {
            width: 100%;
            height: 50px;
            padding: 15px 0;
            text-align: center;
            color: #fff;
            background: #f00;
        }
        
        .bd {
            position: absolute;
            top: 50px;
            /* 往下移顶部的距离 */
            bottom: 0;
            /* 底部贴边 */
            overflow: auto;
            /* 溢出的部分自适应 */
            /* 不设置高度 */
            width: 100%;
            padding: 15px 0;
            text-align: center;
            color: #fff;
            background: #00f;
        }
    </style>
</head>

<body>
    <header class="hd">
        我是固定头部
    </header>
    <div class="bd">
        我是中部部分
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
    </div>
</body>

</html>

PS：这种做法的好处是不占顶部宽度，顶部100%显示全部区域，特别适用于针对右上角有菜单导航的页面。

 

转载于:https://www.cnblogs.com/Sroot/p/7636851.html

weixin_30950237
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
android 线性布局靠在顶部,改变线性布局顶部边距编程android
weixin_35494876的博客
05-27 498
我在一个框架布局中有两个线性布局。android:layout_width="match_parent"android:layout_height="match_parent"android:gravity="left"android:orientation="vertical">android:layout_width="fill_parent"android:layout_height=...
如何实现顶部导航位置固定
iteye_10306的博客
10-12 539
经理说让我研究一下类似新浪的顶部导航固定的实现方式，刚开始有些迷茫？是要用js实现吗？隐隐又感觉应该用css就能实现。于是把新浪的首页另存下来，用FireBug看了一遍，原来最终的效果实现只有一行普通的代码呀：position:fixed; oh,my god! 如此的简单却又如此的惊艳。对于不懂css的我来说真是有些欣喜呀。 自己动手一试，果真如此。哈哈，我成功了...
上面固定下边自适应布局
weixin_30932215的博客
08-18 302
<!DOCTYPE HTML><html><head><meta charset="gb2312"><title>头尾固定中间高度自适应布局</title><style>html, body { height:100%; margin:0; padding:0}#dHead { height...
android线性布局只有一个,android - 我试图在“滚动视图”的末尾放置一个“线性布局”，但是我做不到。 线性布局始终显示在应用栏布局的顶部 - 堆栈内存溢出...
weixin_29149259的博客
05-26 90
我正在尝试在“滚动视图”的末尾放置“线性布局”，但无法实现。 无论我如何尝试，线性布局始终会出现在应用栏布局的顶部。请看下面的代码：XML格式android:id="@+id/group_chat_bar_layout"layout="@layout/app_bar_layoutt"> android:id="@+id/my_scroll_view"android:layout_width...
android线性布局试控件在顶部,android线性布局参数详解.doc
weixin_36302134的博客
05-26 120
android线性布局参数详解/trampou/article/details/5752533 4 个及其重要的参数，直接决定元素的布局和位置，这四个参数是android:layout_gravity ( 是本元素相对于父元素的重力方向 )android:gravity (是本元素所有子元素的重力方向)android:orientation (线性布局以列或行来显示内部子元素)android:la...
css 两边固定中间自适应布局的实现
09-22
主要介绍了css 两边固定中间自适应布局的实现，介绍了四种常用方法以及原理：浮动、浮动内嵌 div、定位、flex。具有一定的参考价值，感兴趣的小伙伴们可以参考一下
css实现左侧固定右侧自适应的布局方式
09-22
主要介绍了css实现左侧固定右侧自适应的布局方式，详细的介绍了3种方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Bootstrap实现渐变顶部固定自适应导航栏
11-29
具体代码如下所示： <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <meta charset="utf-8" />...
Pyqt5自适应布局实例
01-20
实现原理： PyQt5中的布局中，stretch 属性类似于一个可自适应的空白布局。会尽可能将周围的组件布局向外挤压 from PyQt5.QtWidgets import QVBoxLayout, QHBoxLayout # 垂直居中 def vcenter_layout(*widgets): ...
Java继承JPanel实现自适应布局的面板
04-04
`JPanel`默认使用流式布局（FlowLayout），但为了实现自适应布局，通常需要使用其他布局管理器，如网格布局（GridLayout）、边界布局（BorderLayout）、盒式布局（BoxLayout）或者自定义布局管理器。在`...
position:fixed的布局方式使用
朱智文的专栏
02-08 5790
关于fixed属性，在什么情况下需要用，怎么用，首先，我们应该先了解下fixed属性的说明：fixed总是以body为定位时的对象，总是根据浏览器的窗口来进行元素的定位，通过"left"、 "top"、 "right"、 "bottom" 属性进行定位。 那么，我们了解了fixed属性的说明后，就可以知道它的作用了。当我们需要使一个层相对于浏览器来自动调整该层的位置的时候，如果你使用posi
第9天: position 布局之 fixed、sticky
lefex的博客
10-24 668
今天是关于 position 最后一节内容，前两节内容回顾：第7天: position 布局之绝对布局 absolute第5天：position 布局之相对布局 relativefixe...
Android上拉吸顶（上滑标题固定在顶部）
qq_35821446的博客
01-05 2405
效果图 1.home_layout.xml 此布局即可实现上拉标题固定在顶部 <?xml version="1.0" encoding="UTF-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:rvp="http://schemas.andro
页面布局三大核心(三)—定位（position）
qq_46178261的博客
03-22 702
1.定位 1.1 为什么需要定位 提问：以下情况使用标准流或者浮动能实现吗？ 某个元素可以自由的在一个盒子内移动位置，并且压住其他的盒子。 以上效果，标准流或者浮动都无法快速实现，此时需要定位来实现。 所以： 浮动可以让多个块级盒子一行都没有缝隙排列显示，经常用于横向排列盒子。 定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中的某个位置，并且可以压住其他盒子。 1.2 定位组成 定位...
CSS定位布局详解
大河之犬的博客
10-03 6855
CSS定位使你可以将一个元素精确地放在页面上指定的地方。联合使用定位和浮动，能够创建多种高级而精确的布局。其中，定位布局共有4种方式。固定定位（fixed相对定位（relative绝对定位（absolute静态定位（static。
position:fixed元素定位，如何不影响下面的布局
热门推荐
qq_44920883的博客
04-19 1万+
position:fixed；一般是用来定位头部导航栏，固定头部在最上方的位置，不会因为页面滚动产生影响 fixed是一个绝对定位的元素，是相对于整个浏览器窗口进行定位，相对定位一旦移动就会不占据原来的位置，后面的元素就会向上位移； 解决方法： 1.在fixed定位的元素最外面一层div，并设置一个相同的宽高(推荐使用) ```bash <style type="text/css"&gt...
Web移动端Fixed布局的解决方案
a1178118728的博客
03-22 234
原文链接：Web移动端Fixed布局的解决方案 移动端业务开发，iOS 下经常会有 fixed 元素和输入框(input 元素)同时存在的情况。 但是 fixed 元素在有软键盘唤起的情况下，会出现许多莫名其妙的问题。 这篇文章里就提供一个简单的有输入框情况下的 fixed 布局方案。 iOS下的 Fixed + Input BUG现象 让我们先举个栗子，最直观的说明一下这个 BU...
CSS实现顶部底部高度固定，中部高度自适应。（flex布局，小程序，中部含scroll-view 标签）
Lsiyi_的博客
03-11 652
【小程序】css实现顶部底部高度固定，中部高度自适应。（flex布局，中部含scroll-view 标签）
顶部和底部固定中间自适应的布局
github_39274378的博客
09-05 4549
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>头尾固定中间高度自适应布局</title> <style> html, body { height:100%; /*相对的最外层容器的高度要为100%*/ margi...
js首尾固定中间自适应布局
最新发布
03-26
可以使用CSS的flex布局，将容器设置为flex布局，然后通过设置flex-grow属性使中间的内容自适应宽度，而固定的头部和尾部则可以设置固定宽度。...这样就实现了一个简单的js首尾固定中间自适应布局。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值