一尘不染

如何使div相对于父div而不是视口的百分比宽度

html

我想发生的是内部div占用其父div(outer)分配的空间的50%。取而代之的是,将获得视口可用空间的50%,这意味着随着浏览器/视口尺寸的缩小,它也会缩小。

鉴于外div有min-width2000px,我希望内部的div至少1000px宽。


阅读 534

收藏
2020-05-10

共1个答案

一尘不染

position:absolute/relative在节点上指定非静态位置意味着将其用作其中绝对位置元素的参考

我们可以更改定位上下文-绝对定位的元素相对于哪个元素定位。这是通过在元素的祖先之一上设置位置来完成的。

#outer {

  min-width: 2000px;

  min-height: 1000px;

  background: #3e3e3e;

  position:relative

}



#inner {

  left: 1%;

  top: 45px;

  width: 50%;

  height: auto;

  position: absolute;

  z-index: 1;

}



#inner-inner {

  background: #efffef;

  position: absolute;

  height: 400px;

  right: 0px;

  left: 0px;

}


<div id="outer">

  <div id="inner">

    <div id="inner-inner"></div>

  </div>

</div>
2020-05-10