百度360必应搜狗淘宝本站头条
shell 字符串比较my.cnfword空格下划线不显示applicationcontextawaremaven镜像
当前位置：网站首页 > 技术资源 > 正文

让div填充屏幕剩余高度的方法

lipiwang 2025-05-25 13:57 1 浏览 0 评论

技术背景

在前端开发中，经常会遇到需要让某个div元素填充屏幕剩余高度的需求，比如创建具有固定头部和底部，中间内容区域自适应填充剩余空间的布局。随着CSS技术的发展，有多种方法可以实现这一需求。

实现步骤

Flexbox方法

  1. 所有主流浏览器和IE11+都支持Flexbox，对于IE 10或更旧版本，可以使用FlexieJS垫片。
  2. 示例代码如下：
html,
body {
  height: 100%;
  margin: 0;
}

.box {
  display: flex;
  flex-flow: column;
  height: 100%;
}

.box .row {
  border: 1px dotted grey;
}

.box .row.header {
  flex: 0 1 auto;
}

.box .row.content {
  flex: 1 1 auto;
}

.box .row.footer {
  flex: 0 1 40px;
}
<div class="box">
  <div class="row header">
    <p><b>header</b>
      <br />
      <br />(sized to content)</p>
  </div>
  <div class="row content">
    <p>
      <b>content</b>
      (fills remaining space)
    </p>
  </div>
  <div class="row footer">
    <p><b>footer</b> (fixed height)</p>
  </div>
</div>

CSS Table方法

  1. 可以使用CSS表格来实现布局。
  2. 示例代码如下：
body
{
    display:table;
    width:100%;
}
div
{
    display:table-row;
}
div + div
{
    height:100%;  
}
<body>    
    <div>hello </div>
    <div>there</div>
</body>

calc()方法

  1. 当知道头部和底部元素的固定高度时，可以使用CSS3的calc()函数。
  2. 示例代码如下：
html,
body {
  height: 100%;
}

header {
  height: 100px;
  background: grey;
}

section {
  height: calc(100% - (100px + 150px));
  background: tomato;
}

footer {
  height: 150px;
  background-color: blue;
}
<header>100px</header>
<section>Expand me for remaining space</section>
<footer>150px</footer>

vh单位方法

  1. vh代表视口高度，可以直接使用该单位设置元素高度。
  2. 示例代码如下：
body {
  padding: 0;
  margin: 0;
}

.full-height {
  width: 100px;
  height: 100vh;
  background: red;
}
<div class="full-height">
</div>

CSS Grid方法

  1. 使用CSS Grid布局可以很方便地实现布局。
  2. 示例代码如下：
* {
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
}

body {
  min-height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

header {
  padding: 1em;
  background: pink;
}

main {
  padding: 1em;
  background: lightblue;
}

footer {
  padding: 2em;
  background: lightgreen;
}
<header>HEADER</header>
<main>MAIN</main>
<footer>FOOTER</footer>

最佳实践

  • xxxxxxxxxx display: -webkit-box;display: -webkit-flex;display: -moz-box;display: -ms-flexbox;display: flex;-webkit-flex-align: center;-ms-flex-align: center;-webkit-align-items: center;align-items: center;css
  • 如果需要支持旧版本浏览器，可以结合使用CSS Table或JavaScript来实现。
  • 在使用calc()函数时，确保父元素的高度已经正确设置。

常见问题

  • 兼容性问题：不同浏览器对CSS属性的支持可能不同，需要进行充分的测试。
  • 滚动问题：当内容区域超出屏幕高度时，可能会出现滚动条的问题，需要进行适当的处理。
  • 布局错乱：在响应式设计中，布局可能会因为屏幕尺寸的变化而错乱，需要使用媒体查询进行调整。

相关推荐

Qwen上新AI前端工程师!一句话搞定HTML/CSS/JS，秒变React大神

梦晨发自凹非寺量子位|公众号QbitAIQwen上新“AI前端工程师”WebDev，一句话开发网页应用。三大件HTML，CSS，JavaScript一个工具全包了，定睛一看用的还是Reac...

程序员的 JavaScript 代码该如何让计算机搞懂?

出自程序员之手的JavaScript代码，该如何变成计算机所能理解的机器语言呢？本文将带你走进JavaScript引擎内部，一探究竟。作者|LydiaHallie译者|弯月，责编|...

JavaScript:如何优雅的创建数组?

在JavaScript里，有多种方式可以创建数组，下面为你详细介绍：1.使用数组字面量这是最常用的创建数组的方法，使用方括号[]来创建数组。//创建一个空数组letemptyArray...

Jquery 详细用法

1、jQuery介绍(1)jQuery是什么?是一个js框架，其主要思想是利用jQuery提供的选择器查找要操作的节点,然后将找到的节点封装成一个jQuery对象。封装成jQuery对象的目的有...

HTML页面基本结构和加载过程

大家好，我是皮皮。前言对于前端来说，HTML都是最基础的内容。今天，我们来了解一下HTML和网页有什么关系，以及与DOM有什么不同。通过本讲内容，你将掌握浏览器是怎么处理HTML内容的，...

【HarmonyOS Next之旅】兼容JS的类Web开发(一)

目录1->概述1.1->整体架构2->文件组织2.1->目录结构2.2->文件访问规则2.3->媒体文件格式3->js标签配置3....

JavaScript初学者指南

如果你刚接触JavaScript，想必已经被“modulebundlersvs.moduleloaders”、“Webpackvs.Browserify”和“AMDvs.Common...

前端图片延迟加载详细讲解

原文链接：http://www.gbtags.com/gb/share/6366.htm?原本是打算昨天昨天下午的时候就写一篇关于前端图片延迟加载的详细技术的博客的，没想到下午公司项目出现了一些问题...

selenium:操作滚动条的方法(8)

selenium支持几种操作滚动条的方法，主要介绍如下：使用ActionChains类模拟鼠标滚轮操作使用函数ActionChains.send_keys发送按键Keys.PAGE_DOWN往下滑动...

jQuery 获取和设置HTML元素

jQuery中包含更改和操作HTML元素和属性的强大方法。我们可以通过这些方法来获取HTML元素中的文本内容、元素内容（例如HTML标签）、属性值等。text()方法text()方法可以用...

JavaScript脚本如何断言select下拉框的元素内容?

使用JavaScript脚本断言select下拉框的元素内容，需要考虑页面元素是否加载成功，出错时打印等，主要实现功能功能需包括如下几点：1.等待下拉框元素加载完成（支持超时设置）2.获取下...

JavaScript图片或者div拖动拖动函数的实现

/**拖动图片封装html格式：<imglay-src="${item.Resourcesurl}"alt="${item.ResourcesName}"...

JavaScript代码怎样引入到HTML中?

JavaScript程序不能独立运行，它需要被嵌入HTML中，然后浏览器才能执行JavaScript代码。通过<script>标签将JavaScript代码引入到HTM...

当你在Vue.js中想要隐藏 `` 标签时，可以这样做:

在Vue.js里，要是你想要搞掉`<br>`（换行）标签的效果，通常有几种路子：1.使用CSS嗯，最简单的办法就是用CSS搞定，控制元素的样式，让<br>标签彻底不显示...

php手把手教你做网站(三十)上传图片生成缩略图

三种方法：按比例缩小、图片裁切、预览图片裁切不管使用哪一个都是建立在图片已经上传的基础上；预览裁切上传，如果预览的图片就是原始大小，可以预览裁切以后上传（这里是个假象，下边会说明）；1、上传以后按比例...

取消回复欢迎 你 发表评论:

一周热门
最近发表
标签列表