首页 > web前端 > css教程 > 如何创建带页眉和页脚的全高单列 CSS 布局?

如何创建带页眉和页脚的全高单列 CSS 布局?

Susan Sarandon
发布: 2024-12-15 15:44:13
原创
878 人浏览过

How to Create a Full-Height Single-Column CSS Layout with Header and Footer?

创建带有页眉和页脚的基于 CSS 的单列布局

在 CSS 布局设计领域中,创建可以遇到跨页面整个高度(不包括页眉和页脚)的固定宽度、单列布局。为了满足这一要求,人们提出了各种方法,每种方法都有其独特的优点和缺点。

幸运的是,在现代浏览器(2015 年以后)中,可以使用 display:flex 属性访问简单可靠的解决方案。这种方法消除了对 JavaScript 的需求,并提供了一种干净高效的替代方案。

使用 display:flex 的解决方案

要使用 display:flex 实现布局,请遵循以下步骤步骤:

  1. 将 html 和 body 元素设置为 100% 高度、无内边距、无内边距margin.
  2. 将 display:flex 和 flex-direction:column 属性应用于 body 元素。这将垂直排列子元素。
  3. 创建一个 #main 元素并将其 flex-grow 属性设置为 1。这将导致元素扩展以填充剩余的垂直空间。
  4. 使用CSS 属性 min-height 和 background 可根据需要设置页眉和页脚的样式。

示例代码

html, body {height:100%; padding:0; margin:0; width:100%;}
body {display:flex; flex-direction:column;}
#main {flex-grow:1;}

/* optional */
header {min-height:50px; background:green;}
#main {background:red;}
footer {min-height:50px; background:blue;}
登录后复制
<header>header</header>
<div>
登录后复制

通过利用此技术,可以创建满足指定条件的单列布局,确保与现代浏览器的兼容性。

以上是如何创建带页眉和页脚的全高单列 CSS 布局?的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板