html – 具有固定位置的儿童的CSS clearfix替代方案

2023年1月7日 287次阅读

我知道clearfix是一种解决浮动元素的零高度容器问题的方法.

但是,我想知道固定元素是否有任何类似clearfix的方式？

我被卡住了,并且从clearfix方法获得了任何地方.

.navbar-float {
  background-color: #adadad;
  float: left;
}

.navbar-fixed {
  background-color: #dadada;
  position: fixed;
}

div.clearfix {
  border: 1px solid #adadad;
  padding: 4px;
}

.clearfix:before,
.clearfix:after {
  content:"";
  display:table;
}
.clearfix:after {
  clear:both;
}
.clearfix {
  zoom:1; /* For IE 6/7 (trigger hasLayout) */
}
<div class="clearfix">
  <nav class="navbar-float">
    Float
  </nav>
</div>
<br/>
<br/>
<br/>
<div class="clearfix">
  <nav class="navbar-fixed">
    Fixed
  </nav>
</div>

最佳答案 TL;博士;没有.

这种设置不起作用或无法使用此设置的原因是因为文档的流动方式 – 当您添加具有相对定位的元素而没有浮动到另一个div(作为子项)时,您正在改变流程文档,因为父div将拉伸以适应或溢出导致滚动条,或溢出没有滚动条如果溢出：隐藏;例如设置.

位置：绝对;该元素在技术上不再在文档流程中,而是在下一个位置的流程中：相对;父 – 它也不关心其他元素,而是位置：相对;父母仍然关心它的位置.

这使得职位：绝对;非常适合在同一div中的其他元素之上叠加动作.

位置：固定;更进一步,简单地忽略任何位置的任何定位：相对;或任何元素.位置：固定;将您的元素位置绑定到视口,而这允许您拥有这些固定的标题等…

但正因为如此,你不能再“包含”div.您必须知道它的高度并在容器上应用高度或最小高度以创建所需的间距.

你正在评论一个不同的答案：

Header’s height is dynamic on every kind of viewports

我只是假设你在这里对不同的媒体查询有不同的高度.

您可以做的是将需要包含固定导航栏的元素的min-height或height属性添加到那些媒体查询中,以使其随设计一起增长,但它始终保持猜测.

很多网站只有2个大小的标题,一个用于桌面,有点高,响应版本 – 但它们总是有一个设定的高度而不是动态的东西.

通常溢出菜单和其他东西,并用JS增强它们,但我不知道你的情况,所以我没有对此做出任何猜测.

点赞