固定元素可通过内部元素调整大小

【问题标题】：Fixed element resize-able by inner elements固定元素可通过内部元素调整大小
【发布时间】：2012-10-08 19:39:05
【问题描述】：

我在 css 中有这段代码：

div#show{
background-color:black;
position: fixed;
width:100px;
height:100px;
left: 0;
right: 0;
top: 0;
bottom: 0;

margin: auto;
}

它在我的页面上居中显示一个黑框。但是我想让它成为非常量的大小。

div#show{
background-color:black;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;

margin: auto;
}

但在这种情况下，它会覆盖整个页面。是否有解决方案使其尽可能大以覆盖内部元素？

【问题讨论】：

【解决方案1】：

使用position: fixed; 使元素忽略其父元素并适合窗口。

您可以只使用left: 20%; right: 20%; top: 20%; bottom: 20%; 或类似名称，它会拉伸以填满屏幕，在外面留下 20% 的空间……

如果您将父级设置为position:relative，然后

div#show{
  background-color:black;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;

  margin: auto;
}

它只会拉伸以覆盖父元素

【讨论】：