html css 流式布局

分手后的思念是犯贱 2022-03-02 13:20 300阅读 0赞

<!DOCTYPE html>
    <html>
    
    	<head>
    		<meta charset="utf-8" />
    		<title>hello</title>
    		<style type="text/css">
    			.container {
    				display: flex;
    				min-height: 100vh;
    				flex-direction: column;
    			}
    			
    			header {
    				background: #cecece;
    				min-height: 100px;
    			}
    			
    			content {
    				background: #bbbbbb;
    				flex: 1;
    				/* 1 代表盡可能最大，會自動填滿除了 header footer 以外的空間 */
    			}
    			
    			footer {
    				background: #333333;
    				min-height: 100px;
    			}
    		</style>
    	</head>
    
    	<body>
    		<div class="container">
    			<header></header>
    			<content></content>
    			<footer></footer>
    		</div>
    	</body>
    
    </html>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW95YW5saTgwNzc_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW95YW5saTgwNzc_size_16_color_FFFFFF_t_70]: /images/20220302/e32c41619b1e40da8e154adac9a49a83.png

发表评论取消回复

表情：

评论列表（有 0 条评论，300人围观）

还没有评论，来说两句吧...

相关阅读

相关 GUI流式布局、边界布局、网格布局

一个GUI程序，只可以有一个JFrame窗体组件，但可以有多个JPanel面板组件，JPanel也可以使用各种布局管理器。五种布局管理器：流式布局管理器；边界布局管理器（

梦里梦外;/ 2024年02月17日 19:54/ 0 赞/ 22 阅读

相关流式布局

流式布局（百分比布局/非固定像素布局）通过盒子的宽度设置为百分比来根据屏幕的宽度进行伸缩，不受固定像素的限制，内容向两侧填充为了避免页面无限拉伸对内容

小灰灰/ 2023年07月08日 13:25/ 0 赞/ 99 阅读

相关 HTML+CSS十分钟实现响应式布局页面，响应式布局实战教程

承蒙各位小伙伴的支持，鄙人有幸入围了《CSDN 2020博客之星》的前200名，现在进入投票环节，如果我平时写的文章和分享对你有用的话，请每天点击一下这个链接，投上你们宝贵的一

心已赠人/ 2023年01月07日 11:22/ 0 赞/ 98 阅读

相关 HTML+CSS十分钟实现响应式布局页面，响应式布局实战教程

承蒙各位小伙伴的支持，鄙人有幸入围了《CSDN 2020博客之星》的前200名，现在进入投票环节，如果我平时写的文章和分享对你有用的话，请每天点击一下这个链接，投上你们宝贵的一

青旅半醒/ 2022年11月19日 11:14/ 0 赞/ 196 阅读

相关 HTML5&CSS3笔记：流式布局

用em替换px 那用 em 替换 px 还有什么必要性或优越性呢? 有两点显而易见的理由：一是那些使用 Internet Explorer 6 的用户也将能够缩放

桃扇骨/ 2022年07月15日 13:30/ 0 赞/ 208 阅读

相关 Html-响应式布局、弹性布局

一. 响应式布局 1. 移动端响应式布局必须加： <meta name="viewport" content="width=device-width,initia

古城微笑少年丶/ 2022年06月13日 02:58/ 0 赞/ 301 阅读

相关理解流式布局和响应式布局

流式布局：流式布局在CSS2时代就有，主要是靠百分比进行排版，可以在不同分辨率下显示相同的版式。流式布局：网页中主要的划分区域的尺寸使用百分数（搭配min-\、ma

古城微笑少年丶/ 2022年05月21日 22:29/ 0 赞/ 246 阅读

相关 HTML+CSS布局

一、网页的布局 1.固定布局固定网页布局指网站内容被一个固定宽度的容器包裹起来，容器内的区块都有固定的百分比或者像素宽度值。最重要一点是容器是不能移动。不

电玩女神/ 2022年04月15日 00:15/ 0 赞/ 186 阅读

相关小程序流式布局

这只是一个取巧的方式来实现流式布局，有潜在bug，原理是布局分成两列，将要显示的数据也分成奇数列和偶数列，左侧展示偶数列数据，右侧展示奇数列数据。潜在的bug是如果偶数列里

心已赠人/ 2022年03月18日 15:08/ 0 赞/ 240 阅读

相关 html css 流式布局

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <ti

分手后的思念是犯贱/ 2022年03月02日 13:20/ 0 赞/ 301 阅读