PC端無論頁面有沒有完全撐開把footer保持在最底部（不用定位）-css教學-PHP中文網

首頁

web前端

css教學

PC端無論頁面有沒有完全撐開把footer保持在最底部（不用定位）

青灯夜游

Oct 10, 2018 pm 04:22 PM

cssflexbox佈局彈性盒子

最近在寫項目，有的頁面沒有占到一屏，然後footer也就是底部就靠上了，這樣很影響美觀，於是在網上找了找，下面是我的成果

解決這個問題的最佳方法是採用CSS3提供的先進佈局模型：flexbox，可以建立具有適應性的佈局。

下面我們程式碼走起來

<body>
		<p id="header">...</p>
		<p id="content">...</p>
		<p class="footer">...</p>
	</body>

html{
    height: 100%;
}

body{
    display: flex;
    flex-direction: column;
    height: 100%;
}

#header{
   /* 我们希望 header 采用固定的高度，只占用必须的空间 */
   /* 0 flex-grow, 0 flex-shrink, auto flex-basis */
   flex: 0 0 auto;
}

#content{
   /* 将 flex-grow 设置为1，该元素会占用全部可使用空间 
      而其他元素该属性值为0，因此不会得到多余的空间*/
   /* 1 flex-grow, 0 flex-shrink, auto flex-basis */
   flex: 1 0 auto;
}

#footer{
   /* 和 header 一样，footer 也采用固定高度*/
   /* 0 flex-grow, 0 flex-shrink, auto flex-basis */
   flex: 0 0 auto;
}

我們利用flex-deraction：column將頁面結構垂直排列，（flex預設是橫向排列的），同時，將html 和body 元素的高度設定為100%，使其充滿整個螢幕。

上面用到了flex包含的3個屬性，我來介紹一下他們的用途：

#flex-grow：元素在同一容器中對可分配空間的分配比率，及擴展比率
flex-shrink：如果空間不足，元素的收縮比率
##flex-basis：元素的伸縮基準值

也就是header 和footer 只佔用他們應該佔用的空間，將剩餘的空間全部交給主體內容區域

好啦，到這裡，無論頁面內容是多是少，都可以保證footer乖乖的待在底部了。

總結：以上就是這篇文章的全部內容，希望能對大家的學習有所幫助。更多相關教學請訪問

CSS影片教學， CSS3影片教學！

相關推薦：

php公益培訓影片教學

#CSS線上手冊

CSS3線上手冊

#div/css圖文教學

以上是PC端無論頁面有沒有完全撐開把footer保持在最底部（不用定位）的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文轉載於：博客园。如有侵權，請聯絡admin@php.cn刪除

Windows 11: 导入和导出开始布局的简便方法Aug 22, 2023 am 10:13 AM

在Windows11中，“开始”菜单经过重新设计，并具有一组简化的应用，这些应用排列在页面网格中，这与它的前身不同，后者在“开始”菜单上有文件夹、应用和组。您可以自定义“开始”菜单布局，并将其导入并导出到其他Windows设备，以根据您的喜好对其进行个性化设置。在本指南中，我们将讨论在Windows11上导入开始布局以自定义默认布局的分步说明。什么是Windows11中的Import-StartLayout？导入开始布局是Windows10和更早版本中使用的cmdlet，用于将“开始”菜单的自定

如何在 Windows 11 中保存桌面图标位置布局Aug 23, 2023 pm 09:53 PM

Windows11在用户体验方面带来了很多东西，但迭代并不完全防错。用户不时会遇到问题，图标定位的更改很常见。那么如何在Windows11中保存桌面布局呢？该任务有内置和第三方解决方案，无论是保存当前窗口的屏幕分辨率还是桌面图标的排列。对于桌面上有一堆图标的用户来说，这一点变得更加重要。继续阅读以了解如何在Windows11中保存桌面图标位置。为什么Windows11不保存图标布局位置？以下是Windows11不保存桌面图标布局的主要原因：对显示设置的更改：通常，当您修改显示设置时，配置的自定义

H5中position属性的灵活运用技巧Dec 27, 2023 pm 01:05 PM

H5中如何灵活运用position属性在H5开发中，经常会涉及到元素的定位和布局问题。这时候，CSS的position属性就会发挥作用。position属性可以控制元素在页面中的定位方式，包括相对定位（relative）、绝对定位（absolute）、固定定位（fixed）和粘附定位（sticky）。本文将详细介绍在H5开发中如何灵活运用position属性

HTML教程：如何使用Flexbox进行自适应等高等宽等间距布局Oct 27, 2023 pm 05:51 PM

HTML教程：如何使用Flexbox进行自适应等高等宽等间距布局，需要具体代码示例引言：在现代网页设计中，布局是一个非常关键的因素。对于需要展示大量内容的页面来说，如何合理地安排元素的位置和大小，以实现良好的可视性和易用性，是一个重要的问题。Flexbox（弹性盒布局）就是一个非常强大的工具，通过它可以轻松实现各种灵活的布局需求。本文将详细介绍Flexbox

CSS 布局属性优化技巧：position sticky 和 flexboxOct 20, 2023 pm 03:15 PM

CSS布局属性优化技巧：positionsticky和flexbox在网页开发中，布局是一个非常重要的方面。良好的布局结构可以提高用户体验，使页面更加美观和易于导航。而CSS布局属性则是实现这一目标的关键。在本文中，我将介绍两种常用的CSS布局属性优化技巧：positionsticky和flexbox，并提供具体的代码示例。一、positions

选择适合实现响应式布局的单位有哪些？Jan 27, 2024 am 09:39 AM

选择什么单位来实现响应式布局？随着移动设备和平板电脑的普及，越来越多的人使用各种设备来浏览网页。为了确保网页在不同设备上具有良好的可读性和用户体验，响应式布局逐渐成为了设计和开发中的重要考虑因素。而在实现响应式布局时，选择合适的单位非常重要。本文将分析几种常见的单位，以帮助读者选择合适的单位来实现响应式布局。像素（px）：像素是最常见的长度单位，表示屏幕上一

古吉拉特语印度语输入 3 在 Windows 11 中不起作用 [修复]Jul 12, 2023 pm 06:45 PM

古吉拉特语印度语输入3是一种键盘布局，允许您输入古吉拉特语，我们的一些读者抱怨它在Windows11中不起作用。当然，在操作系统上，您可以创建自定义键盘，但使用特定于语言的布局通常会使用户体验更加愉快。因此，让我们帮助您解决PC上的此问题。为什么古吉拉特语印度语输入3不起作用？古吉拉特语印度语输入3属于MicrosoftIME（输入法编辑器），可与英语QWERTY键盘配合使用。根据用户体验，我们收集到以下主要原因：未安装键盘布局。您的键盘布局未启用。键盘布局已损坏。计算机的驱动程序有问题。您可以

HTML教程：如何使用Flexbox进行平均分配布局Oct 16, 2023 am 09:31 AM

HTML教程：如何使用Flexbox进行平均分配布局引言：在网页设计中，经常需要对元素进行布局。传统的布局方法存在一些局限性，而Flexbox（弹性盒子布局）是一种能够提供更灵活、更强大的布局方式。本文将介绍如何使用Flexbox来实现平均分配布局，同时给出具体的代码示例。一、Flexbox简介Flexbox是CSS3中引入的一种弹性盒子布局模型，它可以让元

See all articles