子元素使用position:fixed,导致他的宽度不能和父元素保持一致的解决方案

  最近在编码过程中,遇到过这样一个问题,代码如下,我们有一个父级,他有一定的宽度,在他的里面有两个子级,其中一个是绝对定位的,且要求他们的宽度都和父级保持一致,然后问题就出现了,我们会发现,有了定位的son他的宽度远远的超出了我们父级的宽度,那么问题是怎么引起的呢?

<div class="fathor" style="width:1024px">
    <div class="son" style="position:fixed;width:100%">  </div>

  <div class="demo" style="width:100%">  </div>
</div>

  经过各种百度之后发现,原来给子元素加了position:fixed这个属性之后,他就默认相对于window去定位了,就相当与你将这个元素相对于window加上了position:absolute的属性,所以给他加百分比长度的话就是相对于window的百分比。那么解决方案有哪些呢?我们来一一尝试。

  1、left:0;right:0;因为fixed也相当于是定位的一种,所以我们当然也可以用left和right来进行定位了,然后将left的值扩大,同时将width的百分比减少,从而使得son和demo的宽度达到一致,从而起到一种视觉上的欺骗效果。(PS:请谨慎使用)

<div class="fathor" style="width:1024px;height: 500px;margin: 100px auto;">
  <div class="son" style="position:fixed;width: 76%;height: 200px;background-color: darkblue;left: 163px;right: 0;">
  </div>

  <div class="demo" style="width:100%;height: 300px;background-color: red;margin-top: 210px">
  </div>
</div>

  2、calc();关于calc的具体使用将在我后面的播客中提出,在这里,我们可以将son的width由100%改为calc(100%),即可实现son相对于他的父级元素的定位,因为calc计算的就是元素相对于他的父级元素的一个动态大小,即一直是相对于父级来进行计算的,当你指定calc(100%)的时候,就是说他的宽度将和他的父级保持一致。(PS:该方法亲测靠谱)

<div class="fathor" style="width:1024px;height: 500px;margin: 100px auto;">
  <div class="son" style="position:fixed;width: calc(100%);height: 200px;background-color: darkblue">
  </div>

  <div class="demo" style="width:100%;height: 300px;background-color: red;margin-top: 210px">
  </div>
</div>

  3、absolute改造;因为我们上面提到过,本质上说,fixed就是一个相对于window的absolute,但是absolute却可用relative来指定他相对于谁定位,所以我们在这里,可以将fixed绝对定位用absolute来进行改造。(PS:如果代码改动不大的情况下建议使用,毕竟更好控制,这种就大家自己操作了哟)

  4、给fathor加fixed属性;我们还可以给fathor加position:fixed;属性,从而让父元素也相对于window定位,同时,子元素也是相对于window的定位,所以他们就都是和window产生了联系,从而也就在一定程度上保持了一致。(PS:这种情况适用于fathor是最外层元素的情况下,否则的话fathor相对于他原来的父级的定位就需要进行重新定义了,而且很大可能会破坏原有样式)

<div class="fathor" style="width:1024px;height: 500px;margin: 100px auto;transform: scale3d(1, 1, 1);position: fixed;">
  <div class="son" style="position:fixed;width: 100%;height: 200px;background-color: darkblue">
  </div>

  <div class="demo" style="width:100%;height: 300px;background-color: red;margin-top: 210px">
  </div>
</div>

  综合上面四种解决方法来看,我们可以这样来总结,如果大家遇到的问题和我描述的相似度很大呢,当然是首推第二种calc的方法了,使用之后一劳永逸,安枕无忧。但是难免大家的问题和我碰到的有些出入,所以如果在嵌套div不多的情况下可以选择第四种方法,在比较急的时候可以选择第一种,至于项目刚开始,时间比较充裕的情况下大家也可以试一下第三种改造的方法。

原文地址:https://www.cnblogs.com/inkwind/p/11549919.html

时间: 2024-10-16 01:58:38

子元素使用position:fixed,导致他的宽度不能和父元素保持一致的解决方案的相关文章

css基础 position:fixed/absolute 把div转换为行内块元素

礼悟:    公恒学思合行悟,尊师重道存感恩.叶见寻根三返一,江河湖海同一体.          虚怀若谷良心主,愿行无悔给最苦.读书锻炼养身心,诚劝且行且珍惜.              ide:visual studio 2017             browser:Chrome                     os:win7 代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8&qu

[ jquery 过滤器 parents(expr) ] 此方法用于在选择器的基础之上搜索被选元素沿着父元素链找到符合参数的那个父元素,完成需求,如果没有参数,他会一直沿着父元素链解析到 html 标签

取得一个包含着所有匹配元素的祖先元素的元素集合(不包含根元素 "!DOCTYPE html").可以通过一个可选的表达式进行筛选 实例: <html lang='zh-cn'> <head> <title>Insert you title</title> <meta http-equiv='description' content='this is my page'> <meta http-equiv='keywords

关于子元素的margin-top溢出和元素浮动对父元素高度影响解决方案

以下是个人学习笔记,仅供学习参考. 1.关于子元素的margin-top作用在无margin-top-border的父元素上导致子元素的margin-top溢出问题. 在给没有margin-top-border父元素中的子元素添加margin-top时,发现没有直接表现出来,而是作用到父元素身上,就会导致子元素的margin-top溢出. 条件: 1.父元素没有上边框 2.为第一个子元素设置上外边距时 解决方案: 1.为父元素增加上边框 弊端:父元素会变高 2.通过为父元素设置上内边距来取代子元

子元素用margin-top 为什么反而作用在父元素上?对使用margin-top 的元素本身不起作用?

在这个说明中,“collapsing margins”(折叠margin)的意思是:2个或以上盒模型之间(关系可以是相邻或嵌套)相邻的margin属性(这之间不能有非空内容.padding区域.border边框或使用清除分离方法)结合表示为一个单独的margin.在css2.1中,水平的margin不会被折叠.垂直margin可能在一些盒模型中被折叠:1.在常规文档流中,2个或以上的块级盒模型相邻的垂直margin会被折叠.最终的margin值计算方法如下:a.全部都为正值,取最大者:b.不全是

css之子元素获取(未定义高度)父元素的高度

你可能碰到过这样的需求,一个高度不固定的区域(内容由用户创造),当鼠标经过该区域或者其神马操作时,需要出现一个与该区域一样大的模版: 我们用一个span来处理这个mask.由于 .sample-1 和 .sample-2 的高度是不确定的,也就是说我们没有对它们定义 height.如果父元素没有定义高度,子元素仍然可以通过 height:100% 的方式来得到父元素的实际高度. 除了IE6,几乎所有的主流浏览器都支持子元素获取父元素(未定义高度)的高度: 对于这个用户创造内容的区域,高度会在一个

css父元素和子元素之间margin-top的问题

问题:父元素的盒子包含一个子元素盒子,给子元素盒子一个垂直外边距margin-top,父元素的盒子也会受到子元素的margin-top值的影响. 原因:所有毗邻的两个或者多个元素的margin将会合并为一个margin共享之.毗邻的定义为:同级或者嵌套的盒元素,并且它们之间没有非空内容.padding或者border分隔.其中float和position(css2.1浮动元素和绝对定位元素不参与margin折叠) 解决方法: 1.修改父元素的高度,增加padding-top样式模拟(paddin

CSS子元素在父元素中水平垂直居中的几种方法

1. 水平居中(margin: auto;)子父元素宽度固定,子元素上设置 margin: auto; 子元素不能设置浮动,否则居中失效. #div1{ width: 300px; height: 300px; border: 1px solid red; } #div1 p { width: 100px; height: 100px; background-color: green; /*float: left; !*如果设置了浮动,则自动居中就会失效.*!*/ margin: 0 auto;

子元素浮动 父元素不能自动调节高度的问题

我们知道,子元素浮动或者相对定位,元素都会脱离文档流.而父元素如果没有设置固定高度,在计算高度时,就不会计算浮动子元素所占的高度.但是,有时候我们需要父元素计算其所有子元素的的高度(包括浮动元素)来调整自己的宽高,以便调节自身的背景 border等,此时,只需要给父元素添加css属性: overflow:auto; zoom : 1; 父元素就会自动计算包括浮动子元素内所有子元素的高度来调整自己的高度.

子元素绝对定位,父元素高度自适应子元素高度

子元素设置了绝对定位,父元素没有设置相对定位,因此子元素脱离了文档流,父元素高度就变成没有了,如何让父元素高度自适应子元素高度. 子元素的高度是不确定的    可以JS设置父元素高度 <<span class="hljs-keyword" style="box-sizing: border-box; font-weight: bold;">divid="father"> <<span class="h