Как масштабировать DIV до полной ширины? - PullRequest
Новая
       20

Как масштабировать DIV до полной ширины?

0 голосов
/ 25 октября 2011

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

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

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

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

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

Ответы [ 3 ]

1 голос
/ 25 октября 2011

Исходя из того, что я понимаю, вы можете решить эту проблему, обернув весь ваш контент в 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/

1 голос
/ 25 октября 2011

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

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

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

0 голосов
/ 25 октября 2011

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

Есть ли внутри "контент", о котором вы говорите, где указано DIV или где-то еще на странице?

...