html css 流式布局

分手后的思念是犯贱 2022-03-02 13:20 411阅读 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 条评论，411人围观）

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

相关阅读

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

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

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

相关 CSS之布局系列--静态布局、流式布局、自适应布局、响应式布局的概念及区别

原文网址：[CSS之布局系列--静态布局、流式布局、自适应布局、响应式布局的概念及区别静态布局、流式布局、自适应布局、响应式布局的概念及区别\_IT利刃出鞘的博客-CSDN博客

短命女/ 2023年10月01日 10:35/ 0 赞/ 30 阅读

相关流式布局

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

相关 HTML+CSS布局

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

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

相关 html css 流式布局

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

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