主页 / 问题 / 698432
Accepted
ravend
Asked:2020-07-27 18:15:41 +0000 UTC2020-07-27 18:15:41 +0000 UTC

是否可以设置祖先的宽度？

  • 772

我有这样的结构：

<div id="lev-1">
    <div id="lev-2">
        <div id="lev-3">
        </div>
    </div>
</div>

#lev-2 { position: absolutle; }

是否可以lev-3设置与lev-1

UPDATE

您需要设置顶部滚动条的宽度： 在此处输入图像描述

css

1 个回答

  1. Best Answer

    你可以，如果 IE 支持不重要（答案是宽度和高度）。

    将块设置为#lev-1any transform（例如，tranform: rotate(0deg)视觉上不会改变任何东西），并设置为#lev3组合position: fixed; left: 0; top: 0; width: 100%; height: 100%;（或改为width: 100%; height: 100%;set right: 0; bottom: 0;）。演示：

    #lev-1 {
  transform: rotate(0deg);
  
  /* необязательные стили для демонстрации */
  width: 150px;
  height: 350px;
  border: 2px solid red;
}

#lev-2 {
  position: absolute;
  
  /* необязательные стили для демонстрации */
  width: 250px;
  height: 100px;
  border: 2px solid blue;
}

#lev-3 {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  
  /* необязательные стили для демонстрации */
  border: 2px solid green;
  background-color: yellow;
  opacity: 0.3;
}
    <div id="lev-1">
  <div id="lev-2">
    <div id="lev-3">
    </div>
  </div>
</div>

    这是可行的，因为它遵循CSS 转换规范：

    对于其布局由 CSS 盒模型控制的元素，除了 none 之外的任何转换值都会导致创建堆叠上下文和包含块。该对象充当固定位置后代的包含块。

    松散翻译是什么意思：

    对于由 CSS 盒模型管理的元素，transform除 之外的任何值都将none导致创建混合上下文和包含它们的块。该对象充当具有固定位置的儿童的容器。

    • 3

相关问题