开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

不能使绝对定位的元素获取容器的整个高度

绝对定位的元素无法直接获取容器的整个高度，因为绝对定位会使元素脱离文档流，不再占据正常的布局空间。然而，可以通过其他方法来获取容器的整个高度。

一种方法是使用相对定位的父元素来确定容器的高度。相对定位的父元素会根据其内容的高度自动调整高度，因此可以通过获取相对定位父元素的高度来间接获取容器的整个高度。

另一种方法是使用JavaScript来计算容器的高度。可以使用offsetHeight属性来获取元素的高度，该属性返回元素的像素高度，包括元素的高度、内边距和边框。通过获取容器元素的offsetHeight属性，可以获取容器的整个高度。

以下是一个示例代码，演示如何通过JavaScript获取容器的整个高度：

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      position: relative;
      border: 1px solid black;
      padding: 10px;
    }
    .absolute {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: red;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="absolute"></div>
  </div>

  <script>
    var container = document.querySelector('.container');
    var containerHeight = container.offsetHeight;
    console.log('容器的整个高度：', containerHeight);
  </script>
</body>
</html>

在上述示例中，.container是容器元素，.absolute是绝对定位的元素。通过JavaScript获取.container的offsetHeight属性，即可获取容器的整个高度。

对于腾讯云相关产品和产品介绍链接地址，由于要求不能提及具体品牌商，无法提供相关链接。但腾讯云提供了丰富的云计算产品和解决方案，可以通过访问腾讯云官方网站来了解更多信息。

相关搜索:CSS绝对定位容器大小自动调整到相对定位的div内部不扩展父级的绝对定位为什么绝对定位的元素要扩展父元素的高度为什么绝对定位的指示器会离开相对定位的容器？使绝对定位div下的元素可单击固定位置元素，包含在可变高度的容器div内在jQuery中绝对定位克隆的元素如何为绝对定位的HTML元素对齐基线如何使绝对定位的元素具有响应性？如何根据绝对定位的元素高度动态更改边距？

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

【CSS】定位 ⑥ ( 使用绝对定位在父容器任意位置显示子容器 | 代码示例 )

要实现如下功能 , 下图粉色部分是整体父容器 , 紫色元素是中心的核心位置 , 蓝色是左上角的浮标 , 红色是右下角的浮标 ;

01

【CSS】轮播图案例开发 ( 基本设置 | 子绝父相 | 浏览器水平居中 | 圆角设置 | 绝对定位居中设置 )

设置图片自适应 : 设置的图片可能大于或小于图片容器 , 设置其宽度填充 100% 父容器 , 可以保证图片填充满父容器 ;

01

CSS进阶03-定位体系，格式化上下文，常规流

（注1：如果有问题欢迎留言探讨，一起学习！转载请注明出处，喜欢可以点个赞哦！）（注2：更多内容请查看我的目录。）

01

web前端开发初学者十问集锦（3）

我们经常使用元素的width:100%和height:100%将元素的宽度和高度扩充至父元素的宽度和高度。但是前提是需要对其父元素显示设置宽度和高度，否则无效。

02

【CSS】绝对定位元素设置水平 / 垂直居中 ( 绝对定位元素居中设置 - 先偏移 50% 再回退子元素一半尺寸 | 绝对定位居中设置 )

绝对定位不能通过设置 margin: auto; 样式的方式 , 设置盒子模型水平居中 ;

04

css-height

一个div块级元素没有为其设置宽度和高度，浏览器会为其分配可使用的最大宽度(比如全屏宽度)，但是不负责分配高度，块级元素的高度是由子元素堆砌撑起来的。那么，html和body标签的高度也都是由子级元素堆砌撑起来的。

02

【移动端网页布局】流式布局案例 ⑦ ( 水平排列的图片链接 2 | 浮动设置 | 盒子模型类型设置 | 结构伪类选择器 )

标签作为父盒子 , 其中容纳三个链接标签 , 每个链接标签中包含一个标签 ;

04

前端学习笔记—CSS

文本垂直操作：vertical-align的使用图示。middle设置居中。 vertical-align 只对行内元素、行内块元素和表格单元格（table-cell）元素生效：不能用它垂直对齐块级元素。

01

CSS 面试要点：定位(Positioning)

默认情况下，块级元素的内容宽度就是父元素宽的 100%，且与其内容一样高。内联元素的宽高与内容宽高一样。不能对内联元素设置宽度或高度——它们只是位于块级元素的内容中。如果要以这种方式控制内联元素的大小，则需要将其设置为类似块级元素 display: block。

01

《CSS世界》第六章流的破坏与保护总结

《CSS世界》第六章流的破坏与保护总结 author: @TiffanysBear float属性 float的本质与特性 1.包裹性（包含包裹和自适应） 2.块状化并格式化上下文 3.破坏文档流 4.没有任何margin合并 float的作用机制 float属性使父元素高度塌陷，为了实现文字环绕效果。高度塌陷是为了让跟随的内容可以和浮动元素在一个水平线上。（行框盒子在正常定位状态下只会跟随浮动元素，不会发生重叠） clear属性 clear属性让自身不能和前面的浮动

03

深入理解视觉格式化模型

“理论不懂就实践，实践不会就学理论”，非常赞同bluedavy的这句话。实践过程中经常会遇到某个属性的使用，浏览器渲染效果与预期效果不符，虽然通过死记硬背能避免或巧妙应用这种效果，但总感心虚发慌、毫无自信，因为不知晓背后的原理。这时就不要再用“就是这样的”的借口来搪塞自己，我们需要重新认识它。实践与现象绝对定位是一种常用的定位方式，也经常会看到一些使用技巧，轻松搞定一些不太容易实现的效果。现介绍两个绝对定位的使用技巧： 1. 绝对定位元素，水平方向（top和bottom）或和垂直方向（left和righ

09

【CSS】固定定位 ( 固定定位概念语法 | 固定定位 = 浏览器可视窗口 + 边偏移 | 代码示例 )

固定定位是固定在屏幕中的某个位置 , 即使拖动滚动条 , 固定定位的元素仍然保持位置不变 ;

02

CSS实用技巧（中）

我们经常使用CSS，但是却不怎么了解CSS，本文主要对vertical-align、BFC、position中开发过程不怎么注意的特性进行简要总结，从本文中，你将了解到以下内容：

04

关于浮动

1、浮动元素有什么特征？对父容器、其他浮动元素、普通元素、文字分别有什么影响? 浮动元素：浮动元素的框可以向左或者向右移动，直到它的外边缘碰到父元素包含框或者另一个浮动元素的边框为止；浮动元素不在文档

04

CSS中height:100%和height:inherit的异同

2. 大多数情况作用是一样的除去兼容性，大多数情况下，两者作用是一样的，甚至都很难想出不一样的理由。

01

HTML & CSS页面布局之定位

默认情况下，HTML元素都在标准流中呈现和展示。我们之前把元素分为块级元素，行内元素，行内块级元素，他们的特性是块级独占一行，行内和行内块级可以在一行内共存，这些特性都是针对标准流的。总结一下就是，标准流中元素只能在水平或垂直方向上排版。如果元素是块级元素, 那么就会垂直排版，如果元素是行内元素/行内块级元素, 那么就会水平排版。

01

【移动端网页布局】流式布局案例 ③ ( 实现搜索栏功能 | 伪元素选择器 | 子绝父相 | 外边距塌陷处理 | 二倍精灵图处理方案 )

在调试模式下 , 该父容器的尺寸为 390 x 44 像素 , 该父容器的高度是 44 像素 ;

03

深入理解视觉格式化模型（ VISUAL FORMATTING MODEL）

“理论不懂就实践，实践不会就学理论”，非常赞同bluedavy的这句话。实践过程中经常会遇到某个属性的使用，浏览器渲染效果与预期效果不符，虽然通过死记硬背能避免或巧妙应用这种效果，但总感心虚发慌、毫无自信，因为不知晓背后的原理。这时就不要再用“就是这样的”的借口来搪塞自己，我们需要重新认识它。

03

常见的几种 CSS 水平垂直居中解决办法

用CSS实现元素的水平居中，比较简单，可以设置text-align center，或者设置 margin-left:auto; margin-right:auto 之类的即可。

01

前端开发面试题答案(二)

（2）盒模型：内容(content)、填充(padding)、边界(margin)、边框(border)；

04

17个场景，带你入门CSS布局

CSS 布局本质就是控制元素的位置和大小。比如这样的布局：元素宽960px，水平居中。宽960px是大小。水平居中是位置。又如这样的布局：两个元素在一行，左侧元素固定宽200px，右侧元素撑满剩余空间。固定宽200px，撑满剩余空间是大小。两个元素在一行是位置。

02

CSS水平和垂直居中技巧大梳理

auto只有在块级元素设置了宽度width才有效(块级元素不设宽度默认就占整行了，所以是废话)

03

容易被误解的overflow:hidden

为了页面的健壮性，我们常常需要使用overflow:hidden。有时候是为了防止布局被撑开，有时候是为了配合其它规则实现文字截断，还有时候纯粹是为了创建块级上下文。但是，很多人对这个属性是存在着一定的误解的，网上很多入门的资料或文章都只提到用overflow:hidden加固定的宽度（或高度）可以强制隐藏内部的超出容器的内容。包括之前我们在使用overflow:hidden创建块级上下文的方式来实现图文混排时，都认为overflow:hidden造成了特殊情况下的麻烦（详见[cref flexible-t

超全整理前端开发面试题——CSS篇（2016年）

介绍一下标准的CSS的盒子模型？低版本IE的盒子模型有什么不同的？（1）有两种，IE 盒子模型、W3C 盒子模型；（2）盒模型：内容(content)、填充(padding)、边界(margin)、边框(border)；（3）区别：IE的content部分把 border 和 padding计算了进去; CSS选择符有哪些？哪些属性可以继承？ * 1.id选择器（ # myid） 2.类选择器（.myclassname） 3.标签选择器（div, h1, p） 4.相邻选择器（h

建议收藏！总结了 42 种前端常用布局方案

对 CSS 布局掌握程度决定你在Web开发中的开发页面速度。随着Web技术的不断革新，实现各种布局的方式已经多得数不胜数了。

03

建议收藏！总结了42种前端常用布局方案

对 CSS 布局掌握程度决定你在Web开发中的开发页面速度。随着Web技术的不断革新，实现各种布局的方式已经多得数不胜数了。

03

【面试题解】CSS布局，定位布局，浮动布局，BFC,IFC,FFC,GFC

标准文档流指的是元素排版布局过程中，元素会默认自动从左往右，从上往下的流式排列方式。并最终窗体自上而下分成一行行，并在每行中从左至右的顺序排放元素。

03

CSS 面试要点：BFC(块级格式化上下文)

格式化上下文（Formatting Context）指页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。

02

CSS&HTML面经专题——（三）CSS定位/盒模型/经典布局/浮动布局与BFC

position：static | relative | absolute | fixed | center | page | sticky

03

CSS之定位属性

定位的基本思想很简单，它允许你定义元素出现在页面的任何位置. 是通过position属性配合left,right...等来实现的.

04

css面试点二：BFC（块级格式化上下文）+常见布局方案

在普通流中，元素按照其在 HTML 中的先后位置至上而下布局，在这个过程中，行内元素水平排列，直到当行被占满然后换行，块级元素则会被渲染为完整的一个新行，除非另外指定，否则所有元素默认都是普通流定位，也可以说，普通流中元素的位置由该元素在 HTML 文档中的位置决定。

02

ivx动效按钮基础按钮制作 01

随后我们切换一下屏幕，更改为 PC 端 web，因为手机移动端一般是没有鼠标悬浮事件的：

01

一文掌握css常见布局float、position、flex、grid

css在前端的学习中是一个绕不过去的课题，他决定如何显示的你网页内容，初学css你也许会觉得它很容易，无非就是控制元素的位置，大小，颜色等等表现层面的东西，但当你真正使用它去做一些事前的时候，往往会出现无处下抓的现象，这么多属性，我该使用哪个属性来实现想要的效果呢，更有时候自己以为的效果跟实际出来的效果又有很大差异，有人说css是感性的，确实，它不像javasctipt这种有很强逻辑性的语言，它的很多特性毫无逻辑可以，你只能试出来，从这个角度而言，其实css是很难学的，你需要积累很多很多的场景，才能说可以灵活的使用css，这篇文章就css中最常见的场景---布局，介绍一下集中常见的布局方法。

01

BFC（块级格式化上下文）与常见布局方案

浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的BFC（块级格式化上下文）。

03

四、WebApp 基础可视组件（IVX 快速开发教程）

通过本节你将了解 iVX 开发中的核心—— iVX 组件的使用方法。iVX 的组件是开发应用时所必要的对象，通过这些对象你将快速的完成应用的开发。

03

前端面试题2（CSS）

对BFC规范(块级格式化上下文：block formatting context)的理解？

01

104道 CSS 面试题，助你查漏补缺

最近在整理 CSS 的时候发现遇到了很多面试中常见的面试题，本部分主要原作者在 Github 等各大论坛收录的 CSS 相关知识和一些相关面试题时所做的笔记，分享这份总结给大家，对大家对 CSS 的可以来一次全方位的检漏和排查，感谢原作者 CavsZhouyou 的付出，如果出现错误，希望大家共同指出！喜欢的可以给我点赞鼓励，附笔记链接：https://github.com/Wscats/articles

01

104 道 CSS 面试题 - 知识点总结

对于组合声明的特殊性值计算可以参考：《CSS 优先级计算及应用》《CSS 优先级计算规则》《有趣：256个class选择器可以干掉1个id选择器》

01

CSS 面试要点：盒模型

盒模型（Box Model） (opens new window)，包含了元素内容（content）、内边距（padding）、边框（border）、外边距（margin）。

06

CSS魔法堂：Absolute Positioning就这个样

前言当我们以position:absolute之名让元素脱离Normal flow的控制后，以为通过left和top属性值即可让元素得以无限的自由时，却发现还有各种神秘的力量左右着它的来去，于是我们意识到自己力量的微弱，开始迷茫不前。后来有幸拾到各路前辈高人的秘笈，终于打通任督二脉，记录在案以便日后查阅。以Normal flow为基础 Q:不是说好以左上角为原点(0,0)吗？怎么top:auto;right:auto;bottom:auto;left:auto;时的效果和Normal flow中的是

07

6-css样式

背景图片定位的值可以是应为left,right,top,bottom,center

02

快速理解BFC原理

在讲 BFC 之前，我们先来了解一下常见的定位方案，定位方案是控制元素的布局，有三种常见方案:

02

面试官：CSS 面试题集锦

z-index 属性设置元素的堆叠顺序，拥有更高的堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面

03

关于BFC理解

在进入BFC话题前，先来捋一下常见的定位方案，定位方案是控制元素的布局，主要有三种常见的方案：

03

解决CSS垂直居中的几种方法（基于绝对定位，基于视口单位，Flexbox方法）

在CSS中对元素进行水平居中是非常简单的：如果它是一个行内元素，就对它的父元素应用 text-align: center ;如果它是一个块级元素，就对它自身应用 margin: auto。然而如果要对一个元素进行垂直居中，可能光是想想就令人头皮发麻了。　　多年以来，垂直居中已经成为了CSS领域的圣杯，它同样也是前端开发圈内广为流传的笑话。原因在于它同时具备以下几条特征： 1）它是极其常见的需求。 2）从理论上来看，它似乎极其简单。

07

【CSS3】CSS3 2D 转换 - translate 平移 ( transform: translate 样式 | 百分比移动相对于元素自身尺寸 | 百分比移动实现绝对定位的居中效果 )

CSS3 中的 Transform 转换 , 可以实现标签元素的位移 / 旋转 / 缩放 ;

03

【前端攻略】最全面的水平垂直居中方案与flexbox布局

最近又遇到许多垂直居中的问题，这是Css布局当中十分常见的一个问题，诸如定长定宽或不定长宽的各类容器的垂直居中，其实都有很多种解决方案。而且在Css3的flexbox出现之后，解决各类居中问题变得更加容易了。搜了搜园子内关于flexbox的文章觉得很多不够详尽，故想借介绍flexbox的同时好好总结一番各类垂直居中的方法。由简至繁：行内元素的水平居中要实现行内元素（、等）的水平居中，只需把行内元素包裹在块级父层元素（

等）中，并且在父层元素CSS设置如

04

[CSS] 对定位的深入理解与应用

注意：绝大多数情况下，相对定位，会与绝对定位配合使用。 **原因：**绝对定位的元素（即设置了 position: absolute; 的元素）相对于其最近的一个已定位的祖先元素进行定位。如果没有已定位的祖先元素，它将相对于浏览器窗口（即 body 元素）进行定位。通过将父元素设置为相对定位（position: relative;），而将子元素设置为绝对定位（position: absolute;），可以使子元素的定位基于父元素，而不是整个页面。这使得布局更具可控性和可预测性。

01

如何把控css的方向感

在介绍完问题学习法之后，进入我们今天的主题，接下来我会介绍css的一些底层的知识和比较诡异的现象，借此来让大家对css有更深入的理解。

01

css必知的几个底层知识和技巧

问题学习法：带着问题去学习，有利于集中注意力，目的明确，这既是有意学习的要求，也是发现学习的必要条件。心理学家把注意分为无意注意与有意注意两种。有意注意要求预先有自觉的目的，必要时需经过意志努力，主动地对一定的事物发生注意。它表明人的心理活动的主体性和积极性。问题学习法就是强调有意注意有关解决问题的信息，使学习有了明确的指向性，从而提高学习效率。

02

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭