首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

CSS Div拉伸100%页面高度

在CSS中,要使一个div元素拉伸至100%页面高度,可以使用以下方法:

  1. 使用绝对定位:

将div的position属性设置为"absolute",并将top和bottom属性分别设置为0。这将使div填充整个页面高度。

代码语言:css
复制
div {
  position: absolute;
  top: 0;
  bottom: 0;
}
  1. 使用Flexbox布局:

将div的display属性设置为"flex",并将flex-direction属性设置为"column"。然后将div的子元素的flex-grow属性设置为1。

代码语言:css
复制
div {
  display: flex;
  flex-direction: column;
}

div > * {
  flex-grow: 1;
}
  1. 使用Grid布局:

将div的display属性设置为"grid",并使用grid-template-rows属性将第一行的高度设置为100vh。

代码语言:css
复制
div {
  display: grid;
  grid-template-rows: 100vh;
}

请注意,这些方法可能需要根据您的HTML结构进行调整。如果您需要更多帮助,请提供您的HTML代码,以便我可以为您提供更具体的建议。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

css div高度设置100%如何生效!

div { width: 100%; /* 这是多余的 */ height: 100%; /* 这是无效的 */ background: url(bg.jpg); } 然后他发现这个...高度永远是 0,哪怕其父级塞满了内容也是如此。...1.为何 height:100%无效 有一种看似合理的说法:如果父元素 height:auto 子元素还支持 height:100%,则 父元素的高度很容易陷入死循环,高度无限。...例如,一个 元素里面有一张 vertical-align 为 bottom 同时高度为 192 像素的图片,此时,该高度就是 192 像素,假设此时插入一个子元素,高度设为 100%...要知道,auto 和百分比计算,肯定是算 不了的: 'auto' * 100/100 = NaN 但是,宽度的解释却是:如果包含块的宽度取决于该元素的宽度,那么产生的布局在 CSS 2.1 中是未定义的

5.8K00
  • 关于Div的宽度与高度100%设定

    正像你所知道的那样,设置DIV大小的有两个属性width和height,以前在学习DIV每次给DIV设置100%宽度或高度时都很迷惑,不明确这个100%的宽度(高度)到底有多宽有多高?...div100%是从其上一级div的宽高继承来的,有一点很关键,就是要设置div100%显示,必须设置其上一级div的宽度或高度,否则无效。...你设div高度100%,那么它是和什么地方相对为100%? 前面总得有个容器说明他的高度是多少。这样的话div才能按比例100%继承上一级的高度。...那么,如下的样式可以设置Div撑满整个页面:         html         {          height:100%;          ...所以要想实现撑满整个页面,必须显式地设置高度100%!

    3.8K20

    cssdiv居中显示_css页面居中

    css中设置div元素居中显示的四种方法 一、先确定div的基本样式 二、具体实现方法 第一种:利用子绝父相和margin: auto实现 第二种:利用子绝父相和过渡动画tranform实现 第三种:同样是利用子绝父相和...css结构: *{ margin: 0; height: 0; } .warp{ width: 500px; height: 500px; background-color...原理:设置了left: 50%;top:50%; 之后,子元素位于如图所在位置, 此时,我们需要向左移动子级div宽度的一半,子级div所在位置如图所示 向上移动子级div高度的一半,结果如图所示...即margin-left:calc(-div自身宽度/2),margin-top:calc(-div自身高度/2),也可以自己计算margin-left 和 margin-top的值。...注意:calc()函数,CSS3 的 calc() 函数允许我们在属性值中执行数学计算操作。

    9.4K50

    CSS一个div内两个子元素的高度自适应

    ---- 设想这样一个情况:一个父元素有两个子元素,父元素的高度不确定,用子元素撑起来。 但是这会导致一个问题:各个子元素的高度不一致,为子元素添加height:100%是无效的。...这种方式需要父元素高度确定,然而父元素的高度由子元素确定。 猜想渲染时由于父元素高度不确定,会计算出各个子元素的高度再确定父元素高度,但计算子元素高度时并没有父元素高度可以参考,因此上述方法行不通。...你可以 为父元素设置固定高度 配合height:100%,两个子元素都能撑满父元素 利用span元素与布局 如果span的定位是absolute类型,那么它的高度可以等于父元素的高度。...父元素只根据相对定位的子元素决定高度,也就是说,absolute定位的span设置height:100%是有效的,父元素的高度对它来说是已知的。...这种方法下,父元素的高度仍然由最高的相对定位的子元素确定,其它元素放到span中,所以需要知道最高的子元素。 使用同色背景 虽然很简单,却很实用的方法。子元素的高度虽然不都是100%,但效果一样。

    5.1K30

    小程序页面设置100%高度还是留白怎么办?

    本文前言:小程序页面设置100%高度还是留白怎么办?像小程序,app开发的时候经常会遇到设置高度页面颜色的问题,经常出现留白没占满现象,今天专门整了一篇文章,解决这个问题。  .../light }, 第一种方法:position: fixed;  优点,占满全部不留白,缺点,页面固定不能滑动 box:{ height: 100%; width: 100%;...background-color: #fff; position: fixed; } 第二种,页面高度设置100vh  box:{ height: 100%; width:...100vh; background-color: #fff; } 顺便说下100%和100vh的区别:  vh就是当前屏幕可见高度的1%,也就是说 100vh == 100%, 如果当元素没有内容的时候...,设置height:100%该元素不会被撑开, 设置height:100vh,该元素会被撑开屏幕高度一致。

    1.8K40

    div内图片和文字水平垂直居中「建议收藏」

    大小不固定的图片、多行文字的水平垂直居中 本文综述 想必写css的都知道如何让单行文字在高度固定的容器内垂直居中,但是您知道或者想过让行数不固定的文字在高度固定的容器内垂直居中呢?...: 行数不固定文字垂直居中对齐 有几点简要说明: 1.此例子用em做单位,如果您对em单位了解不够,把握不来的话,可以使用px做单位,值要换; 2.外部div不能使用浮动; 3.外部div高度和文字大小比例...而background-image建议写在页面上,因为实际项目中,这肯定是个动态的URL地址,css文件似乎不支持动态URL 地址。下面就是实例演示页面的效果截图。...原理简述: 一句话,将要显示的图片与一张透明的高度100%,宽度1像素的透明图片vertical-align:middle对齐。...另外,其实这里不一定是透明的图片,使用任意的图片都可以,所以您其实说不定可以减少一次http请求,使用任意的图片将其拉伸高度为容器高,宽度1像素宽度0就可以了。

    3.6K21

    高度不固定的图片、多行文字的水平垂直居中

    有几点简要说明: 此例子用em做单位,如果您对em单位了解不够,把握不来的话,可以使用px做单位,值要换; 外部div不能使用浮动; 外部div高度和文字大小比例1.14为宜; 内部标签的vertical-align...:middle可以省略,但是外部div高度和文字大小比例要修改,我自己试了一下,高度比字体1.5左右的样子; 系统原因,我没能够在IE8下测试。...而background-image建议写在页面上,因为实际项目中,这肯定是个动态的URL地址,css文件似乎不支持动态URL地址。下面就是实例演示页面的效果截图。 ?...原理简述: 一句话,将要显示的图片与一张透明的高度100%,宽度1像素的透明图片vertical-align:middle对齐。...另外,其实这里不一定是透明的图片,使用任意的图片都可以,所以您其实说不定可以减少一次http请求,使用任意的图片将其拉伸高度为容器高,宽度1像素宽度0就可以了。

    3K20

    浅议内滚动布局 - 腾讯ISUX

    我们可以利用绝对定位元素的拉伸特性,使内滚动容器高度自适应匹配。...page相关CSS如下: .page { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } 应该很好理解,绝对定位,满屏拉伸,等同于...然而,在内滚动布局下,“赏”就出来了,就算需要兼容IE6浏览器,黑色半透明高宽100%自适应覆盖也不需要任何JS计算的帮助,也不需要监听window的resize事件,直接CSS就可以搞定。...很简单: .overlay { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } 为啥一行CSS就能搞定所有场景?...不过这也没什么,对吧,弹框出现时候,页面背景没法滚也挺好的。 但是,麻烦的事情是,如果弹框自身高度很高,却又没法滚动呢(浏览器可用高度700像素,弹框有900像素高)?

    1.4K30

    浅议内滚动布局

    我们可以利用绝对定位元素的拉伸特性,使内滚动容器高度自适应匹配。...page相关CSS如下: .page { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } 应该很好理解,绝对定位,满屏拉伸,等同于...然而,在内滚动布局下,“赏”就出来了,就算需要兼容IE6浏览器,黑色半透明高宽100%自适应覆盖也不需要任何JS计算的帮助,也不需要监听window的resize事件,直接CSS就可以搞定。...很简单: .overlay { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } 为啥一行CSS就能搞定所有场景?...不过这也没什么,对吧,弹框出现时候,页面背景没法滚也挺好的。 但是,麻烦的事情是,如果弹框自身高度很高,却又没法滚动呢(浏览器可用高度700像素,弹框有900像素高)?

    2.5K50

    CSS】课程网站头部制作 ④ ( 搜索栏按钮测量 | 搜索栏按钮代码编写 | 代码示例 )

    文章目录 一、搜索栏按钮测量 1、按钮测量 2、按钮切图 二、搜索栏按钮代码编写 1、HTML 标签结构 2、CSS 样式 3、展示效果 一、搜索栏按钮测量 ---- 1、按钮测量 右侧的按钮大小...40 像素 但是为了与父容器匹配 这里拉伸到 42 像素 */ height: 42px; /* 使用图片背景方式设置按钮图片 */ background: url(images/search_button.png...{ border: none; } /* 设置总体背景 */ body { background-color: #f3f5f7; } /* 插入图片自适应 */ img { width: 100%...40 像素 但是为了与父容器匹配 这里拉伸到 42 像素 */ height: 42px; /* 使用图片背景方式设置按钮图片 */ background: url(images/search_button.png...); } 3、展示效果 按钮局部展示效果 : 完整页面展示效果 :

    2.3K70

    浅议内滚动布局

    我们可以利用绝对定位元素的拉伸特性,使内滚动容器高度自适应匹配。...page相关CSS如下: .page { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } 应该很好理解,绝对定位,满屏拉伸,等同于...然而,在内滚动布局下,“赏”就出来了,就算需要兼容IE6浏览器,黑色半透明高宽100%自适应覆盖也不需要任何JS计算的帮助,也不需要监听window的resize事件,直接CSS就可以搞定。...很简单: .overlay { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } 为啥一行CSS就能搞定所有场景?...不过这也没什么,对吧,弹框出现时候,页面背景没法滚也挺好的。 但是,麻烦的事情是,如果弹框自身高度很高,却又没法滚动呢(浏览器可用高度700像素,弹框有900像素高)?

    1.2K20

    前端课程——弹性盒子模型

    弹性盒子模型 什么是弹性盒子模型 CSS3 新增了弹性盒子模型(Flexible Box 或 FlexBox),是一种新的用于在 HTML 页面实现布局的方式。...使得当 HTML 页面适应不同尺寸的屏幕和不同的设备时,元素是可预测地运行。 弹性盒子模型实现 HTML 页面布局是与方向无关的。不类似于块级布局侧重垂直方向,内联布局侧重水平方向。...弹性盒子模型主要适用于HTML页面的组件以及小规模的布局,而并不适用于大规模的布局,否则会影响 HTML 页面性能。 ? 伸缩容器(flex container):包裹伸缩项目的父元素。...stretch:默认值,伸缩项目拉伸填充整个伸缩容器。 测试案例 ? ? ? <!...stretch:默认值,伸缩项目拉伸填充整个伸缩容器。 order属性 CSS order 属性适用于伸缩项目,用于设置伸缩项目在布局时的顺序。

    67020

    CSS Flexbox 布局完全指南 (一):4000字,多示例讲解

    . - 如果你对 CSS 有些了解,完全不知道 Flexbox,我写了一篇综合指南(免费文章,阅读时间约为 46 分钟) - 如果你对 CSS 掌握得不是很好,我推荐你阅读 CSS 全面(实用)指南(74....cards { min-height: 100vh} 建立 Flexbox 布局 下面的代码块新建了一个在 .cards 里面的 Flexbox 布局样式。...卡片在页面内靠左上角对齐,因为 justify-content 的值默认为 flex-start。 同时,卡片垂直拉伸充满整个父元素的高度,因为 align-items 的默认值是 stretch。...一组列宽度相同的基础网格 这些网格有以下特点: - 网格单元格平均布局并充满整行 - 单元格高度一致 使用 Flexbox 很容易实现这个效果,看下面这个标识文本: <div class="row"...你可以从 CSS 网格布局这份资料了解更多 CSS 网格布局的解决方案。 更多示例将在文章 Part 2 展示。

    4.5K20
    领券