代码之家 › 专栏 › 技术社区 › Baumr

CSS定位以填充容器:宽度与左/右?

css-position width cross-browser css

Baumr · 技术社区 · 11 年前

考虑到:

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

enter image description here

是否最适合最大限度地兼容浏览器 set a width in pixels 对于元素,或者简单地 use left and right ?

任何一种方法都有需要注意的常见错误吗?

显然,使用 left: 0; 和 right: 0; 在图像的宽度或填充发生变化的情况下,会使代码更易于管理,但有什么缺点吗 width: 300px 会是有利的吗?

4 回复 | 直到 11 年前

user652649 user652649 11 年前

从历史上看,我们学会了使用 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 非常酷,因为它们最接近静态定位 宽度:自动 并且没有理由不使用它们。与替代品相比,它们更容易使用提供更多功能(例如,使用 margin-left , padding-left 和 left 同时在一个单个元件)。

左+右|上+下 相当大与替代方案相比,浏览器更好地支持 width:100% + box-sizing | calc() 而且它也更容易使用!

当然,如果你不需要(在你的例子中)也在y轴上生长元素, width:100% 使用一些嵌套元素作为填充,这是唯一一个同时支持MSIE6存档的解决方案

所以,这取决于你的需求。如果你想支持MSIE6(这是唯一的实际原因),你应该使用 with:100% ,否则使用 left + right !

希望能有所帮助。

Arts Fantasy cjk84 11 年前

这两种方法都很好,但如果你想让你的设计响应迅速或与手机兼容,我建议你使用 Left: 和 Bottom: 如果集装箱没有被封闭 <div> .

如果它被封装在 <分区> 然后用 width: 100% 或 max-width: 200px 在我看来,这是一种导致显示问题最少的方式。

如果你想让你的主题具有响应性,就避免在CSS中使用固定宽度。

-1

Seer Bhushan Kawadkar 11 年前

这两种解决方案都可以在每个浏览器中正常工作,没有任何问题。在这些情况下,我想添加一个 宽度:100%;左侧:0;底部:0; 对于元素,但如果你喜欢 左侧:0;右侧:0;底部:0; 比你能用的还要多。

-1

iRon 11 年前

我还没有在所有浏览器(和模式)上测试过这一点,但对于IE怪癖模式(例如,在没有定义!DOCTYPE的.HTA中),我已经创建了一个子程序,用于纠正设置了LEFT/RIGHT样式或TOP/BOOTTOM样式的元素的WIDTH或HEIGHT(非自动)。为了避免进行所有类型的单位转换,例程临时删除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事件。