Позиционирование CSS для заполнения контейнера: ширина против левой/правой?

Учитывая:

Для элементов, которые абсолютно расположены внутри относительно расположенный контейнер.
Если вы хотите, чтобы элемент заполнил ширину контейнера.
Элемент также выровнен по нижнему краю.

Лучше всего для максимальной совместимости с браузером установить width в пикселях для элемента или просто использовать left и right?

Любые общие ошибки, которые нужно отслеживать с помощью любого из методов?

Ясно, что использование left: 0; и right: 0; сделает код более управляемым в случаях, когда необходимо изменить ширину или дополнение изображения, но есть ли недостатки, где width: 300px было бы выгодно вместо этого?

Ответ 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>

Кроме того, эта техника не будет работать на некоторых элементах (в том числе на современных браузерах, по спецификации)

<!-- these will not work -->
<!-- edit: on some browsers they may work,
but it 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!

В надежде быть полезным.

Ответ 2

Оба метода хороши, но если вы хотите, чтобы ваш дизайн был отзывчивым или совместим с мобильным телефоном, я бы рекомендовал использовать Left: и Bottom:, если контейнер не заключен в <div>.

Если он заключен в <div>, то сделать это с помощью width: 100% или max-width: 200px является, по-моему, способом, который вызывает наименьшие проблемы с отображением.

Избегайте использования фиксированной ширины в CSS, если вы хотите, чтобы ваша тема была отзывчивой.

Ответ 3

Оба решения работают без проблем в каждом браузере. В этих случаях мне нравится добавлять ширину: 100%; left: 0; bottom: 0; для элемента, но если вам нравится left: 0; right: 0; bottom: 0; больше, чем вы тоже можете использовать.

Ответ 4

Я не тестировал это во всех браузерах (и режимах), но для режима IE quirks (например, в .HTA без! DOCTYPE определен), я создал подпрограмму, которая корректирует WIDTH или HEIGHT на элементах, где LEFT/RIGHT или стиль TOP/BOTTOM (не "авто" ). Чтобы избежать перехода ко всем типам конверсий единиц, рутинная временная стирает стиль LEFT (или TOP) и устанавливает значение WIDTH (или HEIGHT) на 100% для определения смещения RIGHT (или BOTTOM) в пикселях.

script написан в 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 для значимых окон (или родительских элементов).