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

Учитывая:




  • для элементов, которые абсолютно расположены внутри относительно
    расположенный контейнер.

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

  • элемент также выровнен снизу.


Введите описание изображения здесь



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



Любые распространенные ошибки, чтобы следить за любой из них метод?



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

583   4  

4 ответов:

Исторически мы научились использовать 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'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!

Надеясь быть полезным.

12  
2013-05-17 08:42:57

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

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

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

0  
2013-04-19 11:23:08

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

-1  
2013-04-12 16:18:53

Я не проверял это на всех браузерах (и режимах), но для режима IE quirks (например, в an .ХТА без !DOCTYPE defined), я создал подпрограмму, которая корректирует ширину или высоту элементов, в которых задан стиль влево/вправо или стиль сверху/снизу (не "авто"). Чтобы избежать перехода ко всем видам преобразования единиц измерения, процедура временно удаляет левый (или верхний) стиль и устанавливает ширину (или высоту) на 100%, чтобы определить смещение вправо (или вниз) в пикселях.

Сценарий таков: написано в 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 для больших окон (или родительских элементов).

-1  
2013-07-10 15:28:47

Comments

    Ничего не найдено.
Click here to cancel reply.