Question

来自CSS 10.2;

指定百分比宽度。百分比是根据生成的框的包含块的宽度计算的。如果包含块的宽度取决于此元素的宽度，则在CSS 2.1中未定义结果布局。注意：对于其包含块基于块容器元素的绝对定位元素，百分比计算相对于该元素的填充框宽度。这是对CSS1的更改，其中百分比宽度始终相对于父元素的内容框计算。

我觉得奇怪的是，根据元素是否绝对定位，百分比的计算方式也不同。我是CSS的新手，所以我猜它有充分的理由。但是有没有办法将宽度计算返回到包含块而不是填充，而不更改子元素中的position: absolute？目前我在一个绝对定位的子元素中有width:100%，这个小小的细微差别使我的布局绊倒，非常类似于this jsfiddle演示：

Answer 1

是不可能的，但你可以做一个小技巧，删除width:100%添加right:0和left:200px→父级填充的值：

*{
  border: 2px solid red;
}

html {
  height: 50%;
  border: 2px dashed yellow;
}

body {
  margin: 60px;
  height: 100%;
  width: 50%;
  padding-left: 200px;
  position:relative;
  background: #000;
  color: #aaa;
}


.region{
  position: absolute;
  top: 0;
  left:200px;
  right:0;
  border: 2px dashed white;
}

<body>
  <div class="region">hello</div>
</body>

Answer 2

这是一个同时具有右边距和右边距的边框，使用你需要的边框。

如果您想填充region的父级宽度，请将右侧设为0（right: 0;）

＆＃13;

*{
  border: 2px solid red;
}

html {
  height: 50%;
  border: 2px dashed yellow;
}

body {
  margin: 60px;
  height: 100%;
  width: 50%;
  padding-right: 50px;
  position:relative;
  background: #666;
  color: #aaa;
}

.region{
  position: absolute;
  top: 0;
  left: 0;
  right: 40px;
  padding-right: 40px;
  border: 2px dashed white;
  text-align: right;
}

＆＃13;

<div class="region">hello</div>

＆＃13;

绝对定位元素的百分比宽度

2 个答案: