Как мне масштабировать DIV на всю ширину?

#html #css #width #scaling

#HTML #css #ширина #масштабирование

Вопрос:

Я хотел бы установить DIV на 100% ширины страницы, а не на 100% ширины окна.

Итак, если мой контент шире окна браузера, я хочу, чтобы DIV по-прежнему масштабировался на всю ширину, а не заканчивался в середине страницы, как это происходит с width: 100% .

Вложение его в DIV с width: 200%; overflow: visible; помощью в основном работает, но имеет побочный эффект, заключающийся в том, что вы можете прокручивать все 200%. И даже тогда, если содержимое превышает двойную ширину окна, div закончится в воздухе.

Пример: http://jsfiddle.net/nm64V / (пожалуйста, обратите внимание, что содержимое шириной 3000 пикселей — это всего лишь пример, в моем проекте я не знаю, насколько широким будет содержимое и когда оно превысит ширину окна)

Как мне добиться описанного поведения?

1. У ваших стилей HTML и BODY также установлена ширина 100%? Вложен ли этот конкретный DIV в другой тег (кроме тега BODY, который я имею в виду)? Возможно, вы забыли свойства ‘display: …’ и ‘position: …’, чтобы ваш DIV работал правильно.

2. Он вложен в общую оболочку DIV, которая имеет got margin: 0 и ничего больше. Следующий элемент над этой оболочкой — BODY .

Ответ №1:

Я не верю, что то, что вы хотите сделать, возможно таким образом. Вероятно, вам нужно будет привести более конкретный пример того, чего вы хотите достичь.

До тех пор я даю одно предположение, которое может сработать: дайте окружающий элемент ( <body> может сработать, в противном случае добавьте один) display: table-cell , поскольку ячейки таблицы растягиваются, чтобы соответствовать их содержимому. Если вам нужно поддерживать старые браузеры, которые не поддерживают display: table-cell , попробуйте вместо этого добавить одноклеточную таблицу вокруг содержимого.

Пример: http://jsfiddle.net/nm64V/2 /

Ответ №2:

Насколько я понимаю, вы можете решить эту проблему, заключив все свое содержимое в div, заданный по размеру содержимого. Используя ваш пример:

 <div style="margin: 0">
    <div style="width: 3000px;">
        <div style="width: 100%; border: 1px solid red;"></div>
        <div>... Your long content goes here ...</div>
    </div>
</div>

Теперь, какую бы ширину вы ни установили для контейнера div (скажем, 1500px), как внутренний div (с красной рамкой), так и ваш контент будут иметь эту ширину, даже если они выходят за пределы окна браузера.

В случае, если вы не знаете, какого размера будет div контейнера, удалите строку ‘style =»width: 3000px;»‘, и она все равно будет работать.

Пример: http://jsfiddle.net/nm64V/1 /

Ответ №3:

Вероятно, вам следует привести пример того, что именно вы пытаетесь сделать. Поскольку DIV является блочным элементом, он всегда должен занимать всю доступную ширину, если только он не пустой или плавающий.

Является ли «содержимое», о котором вы говорите, внутри указанного DIV или где-то еще на странице?