粘连布局 - 代码天地

粘连布局

其他 2020-02-09 20:50:53 阅读次数: 0

经典粘连布局:有一块内容

,当

的高度足够长的时候，

应该紧跟在

元素的后面；当

元素比较短的时候（比如小于屏幕的高度），我们期望

能够粘连在屏幕底部
移动端可以添加如下meta标签： <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">，以解决字体过小的问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <title>Title</title>
    <link rel="stylesheet" href="font/style.css">
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        html, body {
            height: 100%;
        }

        #wrap {
            min-height: 100%;
            background-color: aliceblue;
        }

        #wrap .main {
            padding-bottom: 50px;
        }

        #footer {
            height: 50px;
            background-color: dodgerblue;
            text-align: center;
            line-height: 50px;
            margin-top: -50px;
        }
    </style>
</head>
<body>
<div id="wrap">
    <div class="main">
        main <br>
        main <br>
        main <br>
        main <br>
        main <br>
        main <br>
    </div>
</div>
<div id="footer">
    footer
</div>
</body>
</html>

猜你喜欢

转载自www.cnblogs.com/kanaliya/p/12288508.html

粘连布局

thml粘连布局

#基础#粘连布局

谋篇布局，新的成长

进程地址空间布局

对“粘连”footer布局的思考和总结

进程的内存空间布局

Linux虚拟地址空间布局

在代码中动态调整布局——LayoutParams

网站外链如何合理布局

Linux进程的内存空间布局

JavaFx---小结（1）：谋篇布局

Linux 虚拟地址空间布局

进程内存空间布局

Confluence 6 自定义站点和空间布局

Linux下C程序的存储空间布局

Linux下C程序进程地址空间布局

进程环境-C程序存储空间布局

聂瓦论马赛公寓的采光、色彩与空间布局

Linux内核线性地址空间布局

4G虚拟地址空间布局

Confluence 6 自定义空间布局

easyui easyui-layout 调整布局大小

C程序存储空间布局复习+备忘

Android利用setLayoutParams在代码中调整布局(margin、width)

Linux mem 2.2 内核地址空间布局详解

虚拟地址空间布局[mem_map/memmap]

Linux内存管理 | 二、虚拟地址空间布局

2022年丙烯酸行业产业布局

3种常见的css页面布局--双飞翼布局、粘连布局、左右两列布局

今日推荐

技术解析 GPT-4o：即时语音交互的突破与 GenAI 发展策略

开源大模型与闭源大模型

微信小程序授权登录获取用户的openid

亿级流量系统架构设计与实战

人工智能时代的程序设计教学与课程设计

纽交所技术问题致伯克希尔 (BRK.A) 显示跌近 100%

探索 api.maynor1024.live：一站式 AI 服务平台

AI一键去衣技术：窥见深度学习在图像处理领域的革命(最后有彩蛋)

艾体宝案例 | 使用Redis和Spring Ai构建rag应用程序

Apple M1 vs 高通8Gen2 vs Apple A12Z各方面比较

【升职加薪必备架构图】Springboot学习路线汇总_springboot四层架构流程图

与Apollo共创生态：Apollo7周年大会自动驾驶生态利剑出鞘

周排行

tensorflow 笔记：二（北大）

fork函数详解

unity单利模板

mac下的特殊键位指引（转自apple）

c语言入门-注释

Python--多任务[线程，进程，协程]

深度对抗学习在图像分割和超分辨率中的应用

【转】【Maven】Project configuration is not up-to-date with pom.xml错误解决方法

基本数据类型与常量池

部署自己的Intell项目的经历

每日归档

更多

2024-06-07(0)

2024-06-06(0)

2024-06-05(0)

2024-06-04(10)

2024-06-03(52)

2024-06-02(4)

2024-06-01(60)

2024-05-31(47)

2024-05-30(4)

2024-05-29(65)