css absolute同时设置top,bottom确定div的高度

最新推荐文章于 2025-07-18 09:10:58 发布

weixin_34221773

最新推荐文章于 2025-07-18 09:10:58 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

文章标签： python

原文链接：https://my.oschina.net/daladida/blog/1560874

本文介绍了一种使用绝对定位实现的圣杯布局方法。通过将元素的position设为absolute，并同时设置top和bottom来确定高度，或者设置left和right来确定宽度，可以轻松实现全屏布局效果。

2019独角兽企业重金招聘Python工程师标准>>>

在做圣杯布局时用到

大概就是将元素定位设置为position:absolute;

然后同时设置top和bottom确定高度

或者同时设置left和right确定宽度

<style>
    .absflex_cont{
        border:1px solid #bababa;
        position:absolute;
        z-index: 2;
        right:0;
        bottom:0;
        top:0;
        width:360px;
        background:#0632B0;
    }
</style>

这样这个元素高度为整屏

转载于:https://my.oschina.net/daladida/blog/1560874

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_34221773

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

Div CSS absolute与relative的区别小结

10-30

在定位的众多属性中，CSS的position属性的两个值：absolute和relative，是经常被使用的。它们各自有着独特的特性以及应用场景。首先，我们需要了解什么是绝对定位（absolute）和相对定位（relative）。绝对定位是...

div css导航菜单用CSS样式表处理斜角导航条

11-08

而“div css导航菜单用CSS样式表处理斜角导航条”这个主题，主要涉及如何使用HTML的`<div>`元素结合CSS（Cascading Style Sheets）来创建具有斜角边框效果的导航栏。下面我们将深入探讨这一主题，详细讲解相关的知识...

参与评论您还未登录，请先登录后发表或查看评论

absolute

当然，我在扯淡！（Paulo Airfald）

03-19

1601

深入理解absolute 文章转自：http://www.jianshu.com/p/a3da5e27d22b 之前介绍过CSS浮动float详解，本篇介绍的绝对定位absolute和浮动float有部分相似性。如果能理解浮动float，对理解绝对定位absolute会大有帮助。先说absolute和float的相似处：包裹性和高度欺骗包裹性所谓一图胜千

css absolute绝对定位让 top 和bottom 同时生效

业余前端的职业经历

01-17

865

只要你的元素没有设置高度就可以实现。可以用来处理一些响应式的页面处理 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initia.

css样式position:absolute关于位置的使用实例

阿酷tony

07-18

888

本文通过实例详细讲解了CSS中position:absolute的用法。示例中创建了一个相对定位的父容器.container，内部的.absolute-box采用绝对定位(top:30px, left:50px)，脱离文档流并相对于父容器定位。关键点包括：1)绝对定位元素需基于有定位属性(非static)的最近祖先元素；2)通过top/right/bottom/left控制位置；3)脱离文档流后不影响其他元素布局。适用于覆盖层、下拉菜单等需要精确定位的场景，使用时需注意定位上下文、z-index层叠顺序等问

div absolute定位时，top>0，高度还能100%撑住页面

weixin_30851409的博客

03-01

218

div absolute定位时，top>0，高度还能100%撑住页面 bottom一定要设置为0 .div{position:absolute;width:100%;top:40px; bottom:0;} posted on 2016-03-01 09...

absolute同时设置left，right,top,bottom

sinat_32290679的博客

08-28

3530

absolute同时设置left，right,top,bottom遵循以下原则如果top和bottom一同存在的话，那么只有top生效。如果left和right一同存在的话，那么只有left生效。

css absolute同时设置top bottom

weixin_30810239的博客

01-11

494

css absolute同时设置top bottom 确定div的高度，若设置了左边框，那么这条边框的高度将随着父定位上下文高度的变大而变大 http://www.webfront-js.com/articaldetail/75.html 转载于:https://www.cnblogs.com/ww01/p/10254785.html...

div+css.rar_CSS html_CSS DIV html_DIV_DIV CSS_html CSS

09-14

- `position`属性（如`static`、`relative`、`absolute`、`fixed`）控制元素的定位，结合`top`、`bottom`、`left`、`right`属性，可以实现绝对定位。 4. **CSS选择器**： - 类选择器（`.class_name`）、ID选择器...

css+div实现大括号.zip

03-10

在CSS中，我们可以为`div`元素设置样式，使其呈现为大括号形状。这通常涉及到定位、边框、背景颜色以及一些CSS3的新特性。 1. **定位**：通过`position`属性，我们可以将`div`元素放置在页面上的任意位置。可以设置...

DIV重叠 CSS让DIV层叠两个DIV或多个DIV顺序重叠加

12-13

这主要通过CSS中的定位属性来实现，包括`position`、`z-index`以及`left`、`right`、`top`和`bottom`等。下面我们将详细探讨这些关键知识点。 1. **定位属性（Positioning）**： - `position`属性决定了元素的定位...

css绝对定位定义块元素的高度

aliven1的博客

07-06

673

html css:main中的绝对定位，top和bottom的组合使用，定义了main的高度

CSS 相对|绝对(relative/absolute)定位

油墨香^-^的博客

05-15

1390

一、absolute属性的情感化认识我对position:absolute属性感性化的认识：absolute是一个善良的有个性的，我行我素、喜欢凌驾一切之上的魔鬼。这家伙，不喜欢也算不上讨厌，但是知道没事最好少招惹，免有后患。二、position:absolute与float:left是近亲先给大家讲个故事吧。曾经有两个魔鬼兄弟，一个叫浮动，一个叫绝对定位，它们总是一起在空中飞行戏耍的。但是，不幸的是，有一天，浮动被巨雷击中，双翼折损，陨落凡间，好在性命还在，但是，翅膀不在，它只能永远留在凡..

CSS绝对定位absolute详解

热门推荐

嘿嘿

01-16

2万+

之前介绍过CSS浮动float详解，本篇介绍的绝对定位absolute和浮动float有部分相似性。如果能理解浮动float，对理解绝对定位absolute会大有帮助。先说absolute和float的相似处：包裹性和高度欺骗包裹性所谓一图胜千言（唯一的区别是：下图的div增加了absolute） <div style="border:4px solid blu...

详解 CSS 绝对定位

weixin_33768481的博客

04-03

186

基本定义和用法在 CSS 中，position 属性指定一个元素（静态的，相对的，绝对或固定，以及粘性定位）的定位方法的类型。当设置 position 属性的值为 absolute 时，生成绝对定位的元素，将该元素从文档流中删除，原来的占位不再存在，并相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性...

css 子absolute导致父高度塌陷问题

树上骑个猴的博客

01-11

1043

网上其他方法都是清除浮动的，解决absolute的塌陷问题，发现只有以下这种js有效 <body> <div class="container" id="container"> <div class="box" id="box" ></div> </div> <script> //拿到子元素的高度 var box=d

去掉父元素position：absolute属性后没有高度了？

xubingnan123的博客

01-02

1万+

前一阵子上网得时候偶然间看到这样一个题：将一个页面均分成四等分。于是我顺手做了一下。以下是我的代码和效果：由于好奇心的作用，我把position：absolute属性删掉了，结果页面上啥也没有了。我不明白其中的原理，就去网上找了找资料并问了问朋友，到目前为止我的理解是这样的：我们都知道absolute属性会使div脱离文档流，但是我没想到absolute这个属性脱离文档流能脱离的如此“干

absolute导致的高度塌陷问题——解决方法

weixin_44066534的博客

07-03

2万+

前段时间写前端页面排版的时候又又又遇到了absolute导致的父元素高度塌陷的问题，以前代码写的少所以遇到问题就是查查查，问题解决后了一个漫长的学期后又遇到一样的问题又得重新查查查，所以这次索性总结一下。什么是高度塌陷？在文档流中，父元素的高度默认被子元素撑开的，也就是说子元素多高父元素就多高，但是当为我们子元素设置浮动以后，子元素就会完全脱离文档流，此时会导致子元素无法撑开父元素的高度，导致父元素的高度塌陷。由于父元素的高度塌陷，则父元素下的所有元素都会向上移动，导致页面的布局混乱。 PS：因为pos

absolute导致高度塌陷

weixin_56006480的博客

05-23

2362

首先，通过querySelector方法获取到父元素和子元素的DOM节点，然后使用offsetHeight属性获取子元素的高度，将其赋值给父元素的高度。需要注意的是，使用相对定位和绝对定位时，子元素的定位是相对于最近的已定位祖先元素，如果没有已定位祖先元素，则相对于文档根元素。4.可以通过JS来获取子元素的高度，并将其赋值给父元素的高度，从而避免绝对定位元素导致的高度塌陷问题。属性会使元素脱离文档流，并不再占据原来的空间，从而导致父元素高度塌陷的问题。属性，可以让子元素相对于父元素的顶部对齐。

css给div设置高度，元素没高度了

最新发布

07-23

<think>我们正在讨论CSS中div高度设置不生效的问题。根据引用，div高度设置为百分比不生效的常见原因是父元素的高度未定义或为0。要解决此问题，需要确保父元素有明确的高度定义，或者使用其他方法使子div的高度能够根据父元素的高度进行扩展。解决方案： 1. 检查父元素的高度：如果父元素的高度没有设置（即为0），则子元素的百分比高度将无效。需要为父元素设置一个具体的高度值（如固定像素值、视口高度单位vh等）或使用其他布局方法（如Flexbox或Grid）来定义高度关系。 2. 使用视口单位：如果希望div的高度相对于视口高度，可以直接使用vh单位，例如：height: 100vh; 这样就不依赖父元素高度。 3. 使用绝对定位：在某些情况下，可以将父元素设置为相对定位，子元素设置为绝对定位，然后设置top:0; bottom:0; 这样也可以撑开高度，但要注意脱离文档流的影响。 4. 使用Flexbox布局：将父元素设置为display: flex; 则子元素的高度可以设置为100%并生效。 5. 设置html和body元素的高度为100%：如果div直接位于body内，那么需要确保html和body的高度都设置为100%，这样div的height:100%才能生效。根据引用[1]和[2]中的内容，我们可以总结出以下步骤：步骤1：设置html和body的高度为100% 如果div是body的直接子元素，那么需要： ```css html, body { height: 100%; } ``` 步骤2：设置父元素的高度如果div不是直接位于body，而是在其他容器内，那么需要确保该容器有明确的高度（可以是百分比，但需要一直向上追溯到有明确高度的祖先元素）。步骤3：使用其他布局方式例如，使用Flexbox： ```css .parent { display: flex; height: 100vh; /* 或者任意确定的高度 */ } .child { height: 100%; /* 现在会占满父元素的高度 */ } ``` 或者使用Grid布局也可以实现类似效果。步骤4：检查是否被其他样式覆盖使用开发者工具检查元素，看是否有其他样式覆盖了高度设置。示例代码（根据引用[2]修改）：原问题代码： ```html <head> <meta charset="UTF-8"> <title>Title</title> <style> .contentDiv { width: 100%; height: 100%; background-color: #cccccc; } </style> </head> <body> <div class="contentDiv"></div> </body> ``` 修复方法：为html和body设置高度100% ```html <style> html, body { height: 100%; } .contentDiv { width: 100%; height: 100%; background-color: #cccccc; } </style> ``` 或者，如果希望div填充整个视口，也可以直接设置body的margin为0，并使用视口高度： ```css body { margin: 0; } .contentDiv { width: 100%; height: 100vh; background-color: #cccccc; } ``` 但注意，100vh可能会超出视口，如果页面有滚动条，则100vh会包括滚动条部分，可能导致垂直滚动。因此，有时使用100%更安全。另外，引用[3]提到，在设置图片大小时，有时需要针对父级设置，但这里的问题主要是高度，所以原理类似。总结：关键是要建立父元素的高度，以便子元素的百分比高度有参照。相关问题： 1. 如何让div的高度自适应剩余屏幕高度？ 2. 在Flexbox布局中，如何设置子元素的高度为100%？ 3. CSS中height:100%和height:auto的区别是什么？ 4. 如何解决CSS中margin和padding影响高度计算的问题？ 5. 在响应式布局中，如何根据内容动态调整div的高度？注意：以上问题都是围绕CSS高度设置展开的，有助于用户深入理解。</think>### CSS设置div高度不生效问题解决方法在CSS中设置div高度不生效的常见原因是**百分比高度需要明确的父级高度参照**。根据引用内容[^1][^2]，以下是系统性的解决方案： #### 核心解决步骤： 1. **检查父元素高度**（关键步骤） - 百分比高度基于父容器高度计算 - 若父元素高度为`0`或未定义，子元素`height:100%`无效 ```css html, body { height: 100%; /* 必须为根元素设置基准高度 */ } .parent { height: 500px; /* 或使用vh单位 */ } .child { height: 100%; /* 此时才会生效 */ } ``` 2. **使用视口单位**（推荐方案） - 直接基于视口高度设置，避免依赖父元素： ```css .full-height { height: 100vh; /* 1vh=视口高度的1% */ } ``` 3. **Flexbox布局方案**（现代最佳实践） ```css .container { display: flex; min-height: 100vh; /* 建立高度基准 */ } .content { flex: 1; /* 自动填充剩余高度 */ } ``` 4. **绝对定位方案**（特殊场景） ```css .parent { position: relative; height: 100vh; } .child { position: absolute; top: 0; bottom: 0; /* 通过定位拉伸高度 */ } ``` #### 常见错误排查： - **未重置默认边距**：`body`默认有`margin`，需重置： ```css body { margin: 0; } ``` - **内联元素限制**：`<div>`默认是块级元素，但若被误设为`display: inline;`会导致高度失效 - **盒模型干扰**：`box-sizing: border-box;`可避免`padding`影响高度计算： ```css * { box-sizing: border-box; /* 包含padding/border */ } ``` #### 示例修复代码： ```html <!DOCTYPE html> <html style="height:100%"> <body style="height:100%; margin:0"> <div style="height:100%; background:blue;">  </div> </body> </html> ``` > **关键原则**：百分比高度是**递归依赖**的，必须从根元素(`html`)到目标元素形成完整的高度链[^1][^2]。 --- ### 相关问题 1. 如何让div高度自适应剩余屏幕空间？ 2. Flex布局中`height:100%`失效该如何解决？ 3. CSS Grid布局如何实现高度自适应？ 4. 为什么`min-height:100%`有时不生效？如何修复？ 5. 移动端开发中如何正确处理视口高度单位(vh)？ [^1]: HTML学习之给div高度设置百分比不生效的问题 [^2]: 【CSS】解决div设置height高度为100%未生效的办法 [^3]: 解决css设置图片大小不生效的问题