Question

考虑到：

对于绝对位于相对位置的元素定位容器。
如果您希望元素填充容器的宽度。
元素也是底部对齐。

enter image description here

最适合元素的set a width in pixels与浏览器的最大兼容性，还是use left and right？

使用这两种方法都需要注意哪些常见错误？

显然，使用left: 0;和right: 0;可以使代码在图像的宽度或填充更改时更易于管理，但是有任何缺点，width: 300px将是有利的？

Answer 1

从历史上看，我们学会使用width而不是left & right，因为IE6不支持同时是同一轴的两个属性

<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>

此外，此技术不适用于某些元素（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)

但是，使用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以及不必要的头痛。

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

left + right | top + bottom非常重要与替代width:100% + box-sizing | calc()相比，浏览器更好地支持而且它也更容易使用！

当然如果你不需要（如你的例子中）在y轴上生长元素， width:100%使用一些嵌套元素进行填充，这是对MSIE6进行归档支持的唯一解决方案

所以，取决于你的需求。如果你想支持MSIE6（这是唯一的理由）你应该使用with:100%，否则使用left + right！

希望能提供帮助。

Answer 2

这两种方法都很好，但如果您希望自己的设计具有响应性或手机兼容性 - 如果容器未包含在Left:中，我建议您使用Bottom:和<div>。

如果它包含在<div>中，那么使用width: 100%或max-width: 200px进行此操作是我认为导致显示问题最少的方法。

如果您希望主题具有响应能力，请避免在CSS中使用固定宽度。

Answer 3

这两个解决方案都可以在每个浏览器中运行而不会出现任何问题。在这些情况下，我想添加宽度：100％;左：0;底部：0; 表示元素，但如果你喜欢左：0;右：0;底部：0; 更多，也可以使用它。

Answer 4

我没有在所有浏览器（和模式）上对此进行测试，但是对于IE怪癖模式（例如，在没有定义的DOCHPE的.HTA中），我创建了一个子程序，用于校正LEFT元素的WIDTH或HEIGHT / RIGHT样式或TOP / BOTTOM样式设置（不是“自动”）。为避免进入所有类型的单位转换，例程临时删除LEFT（或TOP）样式并将WIDTH（或HEIGHT）设置为100％以确定RIGHT（或BOTTOM）偏移（以像素为单位）。

该脚本是用VBScript编写的，但将这个想法转换为JavaScript应该很困难。

<html>
<head>
    <script language="VBScript">

Option Explicit

Sub Justify(ByVal hElement)

    Dim sStyleTop, iTop, iBottom, sStyleLeft, iLeft, iRight

    With hElement
        If .currentStyle.top <> "auto" And .currentStyle.height = "auto" And .currentStyle.bottom <> "auto" Then
            iTop = .offsetTop
            sStyleTop = .currentStyle.top
            .style.top = "auto"
            .style.height = "100%"
            iBottom = -.offsetTop 
            .style.height = .offsetHeight - iTop - iBottom & "px"
            .style.top = sStyleTop
        End If
        If .currentStyle.left <> "auto" And .currentStyle.width = "auto" And .currentStyle.right <> "auto" Then
            iLeft = .offsetLeft
            sStyleLeft = .currentStyle.left
            .style.left = "auto"
            .style.width = "100%"
            iRight = -.offsetLeft 
            .style.width = .offsetWidth - iLeft - iRight & "px"
            .style.left = sStyleLeft
        End If
        For Each hElement In .Children
            Justify hElement
        Next
    End With

End Sub

Sub window_onload

    Justify Document.body

End Sub

    </script>
    <style type="text/css">
    body {
        position:absolute;
        width:100%;
        height:100%;
    }
    #outer{
        background:blue;
        position:absolute;
        top:10px;
        right:20px;
        bottom:30px;
        left:40px;
    }
    #inner{
        background:green;
        position:absolute;
        top:40px;
        right:30px;
        bottom:20px;
        left:10px;
    }
    </style>
</head>
<body>
    <div id="outer">
        <div id="inner">
        </div>
    </div>
</body>
</html>

证明文档中所有元素的合理命令是：

Justify Document.body

我在onload事件中调用它，因为它涉及我的情况下固定大小的.HTA但我希望例程也可以处理大小窗口（或父元素）的onsize事件。

CSS定位填充容器：宽度与左/右？

4 个答案: