CSS定位填充容器：width对左/右？ [英] CSS positioning to fill container: width vs. left/right?

问题描述

考虑：

• 对于位于相对
  定位容器内的元素，


• 如果您希望元素填充容器的宽度。


• 元素也是底部对齐。

>

最佳浏览器兼容性适用于设置宽度以像素为单位，或者直接使用左和 right ？

任何常见错误任何一种方法？

显然，使用 left：0; 和 right：0; / code>会使代码更易于管理的情况下，图像的宽度或padding是改变，但有任何缺点， width：300px 将是有利的， ？

解决方案

历史上，我们学习使用 width $ c> left&因为IE6不支持
同时同一轴的两个属性

 < div style =top：0; bottom：0; position：absolute;>现代浏览器< / div> 
 
< div style =top：0; height：100％; position：absolute;> MSIE6< / div> 
 
< div style =left：0; right：0; position：absolute;>现代浏览器< / div> 
 
< div style =left：0; width：100％; position：absolute;> MSIE6< / div> 
 
< div style =left：0; right：0; top：0; bottom：0; position：absolute;> modern browsers< / div> 
 
< div style =left：0; top：0; height：100％; width：100％; position：absolute;> MSIE6< / div> 
  

此外，此技术不适用于某些元素（

 
 <！ - 这些不工作 - > 
<！ -  edit：在一些浏览器上，他们可能工作，
但它不是标准，所以不要依赖 - > 
 
< iframe src =style =position：absolute; top：0; bottom：0; left：0; right：0;>< / iframe> 
 
< textarea style =position：absolute; top：0; bottom：0; left：0; right：0;>< / textarea> 
 
< input type =textstyle =position：absolute; left：0; right：0;> 
 
< button ...>< / button> 
 
和其他可能的...（其中一些甚至不能显示：block）
  





---

但是，使用 width：auto 属性分析正常静态流中发生的情况

 < div style =width：auto; padding：20px; margin：20px; background：lime;> a< / div& 
  

您会看到它非常类似于...

 < div style =width：auto; padding：20px; margin：20px; background：lime; 
 position：absolute; top：0; left：0 ; bottom：0; right：0;> b< / div> 
  

...相同的属性具有相同的值！这真的很好！否则为：

 < div style =width：100％; height：100％; 
 position：absolute; top：0; left：0;> 
< div style =padding：20px; margin：20px; 
 background：lime;> c< / div> 
< / div> 
  

这也不同，因为内部div不填满y轴。
要解决这个问题，我们需要css calc（）或 box-sizing / p>

---

我的回答是， left + right | top + bottom 真的很酷，因为它们最接近静态定位的 width：auto
，没有理由不使用它们。与替代方法相比，它们更容易使用，他们
提供更多的功能（例如，使用 margin-left ， padding-左$ 和左同时在
单一元素）。

left + right |顶部+底部是相当
更好的支持浏览器相比，替代 width：100％+ box-sizing | calc（）
，它也更容易使用！

当然，如果你不需要使用一些嵌套元素作为填充，它是唯一的解决方案来存档支持也为MSIE6 c> width：100％ / p>

所以，取决于你的需要。如果你想支持MSIE6（这是唯一的实际原因），你应该使用：100％，否则使用 left + code>！

希望有用。

Considering:

• For elements that are absolutely positioned inside a relatively positioned container.
• If you want the element to fill the width of the container.
• The element is also bottom-aligned.

Is it best for maximum browser compatibility to set a width in pixels for the element, or simply use left and right?

Any common bugs to watch out for with either method?

Clearly, using left: 0; and right: 0; would make the code more manageable in cases where the image's width or padding were to change, but are there any downsides where width: 300px would be favorable instead?

解决方案

Historically we learnt to use width instead of left & right because IE6 didn't support at the same time the two properties of the same axis

<div style="top:0;bottom:0;position:absolute;">modern browsers</div>

<div style="top:0;height:100%;position:absolute;">MSIE6</div>

<div style="left:0;right:0;position:absolute;">modern browsers</div>

<div style="left:0;width:100%;position:absolute;">MSIE6</div>

<div style="left:0;right:0;top:0;bottom:0;position:absolute;">modern browsers</div>

<div style="left:0;top:0;height:100%;width:100%;position:absolute;">MSIE6</div>

Also, this technique will not work on some elements (including on modern browsers, by spec )

<!-- these will not work -->
<!-- edit: on some browsers they may work,
but it's not standard, so don't rely on this -->

<iframe src="" style="position:absolute;top:0;bottom:0;left:0;right:0;"></iframe>

<textarea style="position:absolute;top:0;bottom:0;left:0;right:0;"></textarea>

<input type="text" style="position:absolute;left:0;right:0;">

<button ... ></button>

and possibly others... (some of these can't even be display:block)

---

But, analysing what happens in the normal static flow using the width:auto property

<div style="width:auto;padding:20px;margin:20px;background:lime;">a</div>

You will see it's very similar to...

<div style="width:auto;padding:20px;margin:20px;background:lime;
    position:absolute;top:0;left:0;bottom:0;right:0;">b</div>

... same properties with the same values! This is really nice! Otherwise it will look like:

<div style="width:100%;height:100%;
    position:absolute;top:0;left:0;">
    <div style="padding:20px;margin:20px;
        background:lime;">c</div>
</div>

Which is also different, because the inner div doesn't fill the y axis. To fix this we will need css calc() or box-sizing and an unnecessary headache.

---

My answer is, left + right | top + bottom are really cool since they are closest to the static positioning's width:auto and there is no reason to not use them. They are way easier to use compared to the alternative and they provide much more functionality (for example, using margin-left, padding-left and left at the same time in one single element).

left + right | top + bottom is considerably better supported by browsers compared to the alternative width:100% + box-sizing | calc() and it's also easier to use!

Of course if you don't need (as in your example) to grow the element also in the y axis, width:100% using some nested element for the padding, it's the only solution to archive support also for MSIE6

So, depends by your needs. If you want to support MSIE6 (it's the only actual reason to do that) you should use with:100%, otherwise use left + right!

Hoping to be helpful.

这篇关于CSS定位填充容器：width对左/右？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！