CSS Div拉伸100%页面高度 - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

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

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

8.6K0 0

div高度设置100%无效的问题

今天遇到一个问题，给div设置高度 height: 100%;却没有生效，在f12审查元素的时候可以看到高度字占据了半屏，并没有占据100%全屏，也就是说，div高度设置100%无效。 ?...记录一下解决办法: 找到div的父级元素，并且给父级元素手动设置一个高度，这个问题就解决了。...错误原因，根本在于没有浏览器是计算元素高度和宽度的原理： Web浏览器在计算有效宽度时会自动将页面内容平铺填满整个横向宽度。...但是浏览器根本就不计算内容的高度，当一个元素的高度设定为百分比高度时，无法根据获取父元素的高度，也就无法计算自己的高度。

7.5K2 0

您找到你想要的搜索结果了吗？

是的

没有找到

DIV+CSS侧边栏自适应高度

也就是说sidebar1定义的背景并没有自动随着页面高度的增加而自动延伸下来。即使你把sidebar1的高度设置成100%也是没有效果的。...解决办法很简单，因为另一侧的mainContent的内容增加了，高度变高了，会自动导致包含它的container的高度也自然增加，所以如果把sidebar1的背景设置在container中就解决了。

3.7K1 0

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

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

6K2 0

利用Div + CSS快速布局页面

这里就轮到CSS出场了。我们通过CSS样式的定义，再在HTML的div>div>中调用这些样式，就可以实现Div和CSS的连接。...举例来说，如果我们在CSS中声明了一个样式——.row{width:100%;}，那么在HTML中就可以注明某一或某些Div适用这一类，来调用这一样式。如下，第二层的Div就使用了row这个样式。...div> div class=“row”> div>div> div>div> div> div> 将页面等分成12栏分栏布局是使用Div+CSS布局网页的一种主要布局方式...所以说，把页面分成12栏的好处就是——能利用合并栏来将页面等分成2、3、4栏，如下图 ?...首先我们在CSS中，定义如下样式 .row {width:100%; display: flex; /*为了让同一row中的div横向排列，而非默认的纵向*/} .col-1 {width: 8.33%

3.4K1 0

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

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

6.7K3 0

小程序页面设置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，该元素会被撑开屏幕高度一致。

3.1K4 0

【Python100天学习笔记】Day23 CSS渲染页面

使用CSS渲染页面简介 CSS的作用 CSS的工作原理规则、属性和值常用选择器颜色（color）如何指定颜色颜色术语和颜色对比背景色文本（text / font）文本的大小和字型...(font-size / font-family) 粗细、样式、拉伸和装饰(font-weight / font-style / font-stretch / text-decoration)...letter-spacing)和单词间距(word-spacing) 对齐(text-align)方式和缩进(text-ident) 链接样式（:link / :visited / :active / :hover） CSS3...盒子大小的控制（width / height）盒子的边框、外边距和内边距（border / margin / padding）盒子的显示和隐藏（display / visibility） CSS3

1.2K2 0

CSS Flexbox 布局完全指南（二）：3000字，多示例讲解

main { height: calc(100vh - 40vh);} 上面的代码块使用 CSS 中的 calc 来计算 main 的高度。...不管怎样，main 的高度都要等于 calc(100vh — height of header — height of footer)。...左边的盒子拉伸填满可见屏幕，媒体主体在媒体对象（白色部分）内横向填满剩下的空间我们来调整下拉伸的盒子模型。 .media { ... align-items: flex-start} ?...媒体对象的嵌套你甚至可以不改变已有的 CSS 样式来继续用嵌套布局媒体对象。...在不改变已经写好的 CSS 样式情况下，可以用 Unicode 来代替图片。 div class="media"> div class="media-object">?

3.3K2 0

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

有几点简要说明：此例子用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就可以了。

4.3K2 0

CSS布局(二)

CSS布局(二) 等高布局等高布局，顾名思义，就是指子元素在父元素中高度相等的布局。开始之前，先看一个情境。... div> css代码 main { color: #eee; } main>div { display: inline-block; width: 300px...，即上面第一个子元素的高度再添加 margin-bottom，值为 padding-bottom的负值，就会让父元素收缩成只有最高的子元素的高度 flex布局因为flex布局，项目默认会拉伸为父元素的高度...当然，想让它不拉伸为父元素的高度也可以，只需要设置父元素 align-items来防止拉伸，因为 align-items是设置项目在侧轴的排列方式，默认值为 stretch，即会拉伸。...html div class="box"> 主体内容 div> css html, body {

1.7K3 0

浅议内滚动布局 - 腾讯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像素高)？

2K3 0

前端面试【CSS】— 实现布局：div垂直居中，左右10px，高度始终为宽度一半

实现一个div垂直居中, 其距离屏幕左右两边各10px, 其高度始终是宽度的50%，同时div 中有一个文字A，文字需要水平垂直居中。...; width: 100%; } .outer-box { margin: 0 10px; height: 100%; display:..."> div class="box">Adiv> div> div> 当然，这个面试题也可以用计算属性来实现，但是那样的你可能得不到面试官的青睐...; height: 100%; } .wrapper { position: relative; width: 100%; height...class="wrapper"> div class="box">Adiv> div>

1.6K1 0

浅议内滚动布局

我们可以利用绝对定位元素的拉伸特性，使内滚动容器高度自适应匹配。...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像素高)？

3.2K5 0

【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、展示效果按钮局部展示效果 : 完整页面展示效果 :

3.8K7 0

浅议内滚动布局

我们可以利用绝对定位元素的拉伸特性，使内滚动容器高度自适应匹配。...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.6K2 0

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 展示。

7.1K2 0

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

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

1.2K2 0

《前端技术基础》第03章 CSS 布局【合集】

CSS 布局（Cascading Style Sheets Layout）是网页设计的核心，定义元素位置、大小和排列，构建页面结构。...第一节传统CSS 布局方式 CSS（Cascading Style Sheets）作为用于网页样式设计的重要语言，其传统布局方式在网页页面的构建中发挥着关键作用。...行内元素的宽度和高度由其内容决定，并且不能直接设置宽度和高度属性（部分特殊的行内元素如除外）。示例1-2：粘性元素div> 这里是大量的页面内容，当页面滚动时，粘性元素会在特定位置固定。...设置自动生成网格行轨道高度。

1.8K0 0

【Html.js——图片折叠效果】折叠手风琴（蓝桥杯真题-1763）【合集】

/style.css 是页面样式文件。.../css/style.css">：引入外部的 CSS 样式文件，将 style.css 文件应用到页面，为页面添加样式。...height: 100vh;：将 body 的高度设置为视口高度的 100%。 transition: 0.25s;：添加过渡效果，让元素的属性变化更平滑。...body.options 部分： display: flex; flex-direction: row; align-items: stretch;：将 .options 容器设置为水平方向的弹性布局，并让子元素拉伸以填充容器的高度...min-width: 600px; max-width: 900px; width: calc(100% - 100px); height: 400px;：设置 .options 容器的宽度和高度，并设置最小和最大宽度

5.2K0 0

点击加载更多

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭