Установите ширину тела до 100% документ

Так у меня есть:Установите ширину тела до 100% документ

<body style="border:1px solid red;width:100%;"> 
     <div style="position:absolute;left:2000px;"> 
      1 
     </div> 
    <body>

Есть ли способ, чтобы сделать ширину тела, чтобы быть 100% документ (в том числе «прокрутка пространства»), а не 100% внутренней ширина окна в этом случае? Я имею в виду, мне нужен результат, как если бы я применил «width: 2000px;» к телу, но не зная этого числа.

Я знаю, что это займет одну строку кода в js, и все же я удивляюсь, если я могу сделать это с чистым css.

Чтобы уточнить: Когда я пишу «ширина: 100%;» я ожидаю, что ширина тела будет растянута до 2000 пикселей (чтобы включить это абсолютно позиционированное div), но она простирается только до 1024 пикселей (ширина окна браузера).

источник

2013-07-05 haldagan

Вы хотите скрыть свиток или получить его за пределами ширины браузера? Как горизонтальный, так и вертикальный (если я правильно понимаю ваш вопрос) – Sergio

'width: 100%' должен работать. Я думаю, вы можете попробовать «переполнение: скрытый» на теле. – chead23

Я думал, что описал это как можно проще ... Мне нужно тело, чтобы заполнить все пространство справа. Теперь его ширина не превышает ширину окна браузера (1024 пикселя), затем становится белым. – haldagan

Существует логическая головоломка с этой компоновкой.

<body style="background:red;width:100%;"> 
    <div style="position:absolute;left:2000px;"> 
     1 
    </div> 
<body>

Поскольку внутренний div позиционируется абсолютно, он находится вне потока документа, и, следовательно, родительский блок контейнера, <body>, не может вычислить ширину, основанную на абсолютно позиционируется для дочернего элемента.

Назначая процентную ширину 100% до <body>, ширина фактически вычисляется на основе ширины корневого элемента, в данном случае, <html>, что может, в свою очередь, наследует его высоту от просмотра.

Этот эффект не может быть достигнут только с помощью CSS.

Если вам нужно, чтобы внутренний div был абсолютно позиционирован, вам понадобится функция JavaScript/jQuery для определения ширины <body> на основе некоторых настраиваемых правил, которые вы хотите указать.

источник

2013-07-05 15:36:33

Я сказал, что знаю, как решить это с помощью js. Итак ... нет «хаков» или smth для чистого css? – haldagan

Чтобы быть ясным, окно просмотра не совпадает с корневым элементом; поле корневого элемента существует как дочерний элемент окна окна просмотра. Когда вы представляете элемент, у которого нет позиционированных предков, он всегда привязывается к окну просмотра. – BoltClock

@BoltClock Благодарим вас за это, я исправил свой ответ, соответственно, чтобы отразить структуру дерева просмотров -> html ->. –

Свойство width не имеет ничего общего с дочерними элементами объектов. Кроме того, благодаря абсолютному позиционированию этого элемента он фактически заставляет родителя ПОЛНОСТЬЮ игнорировать любые параметры размера этого дочернего элемента. Но даже с относительно позиционированным объектом со смещением только исходное положение элемента будет иметь влияние на его родительский элемент, а не на его смещение.

Ширина установки до 100% заставит ее заполнить 100% своего родительского контейнера, в данном случае - <html>. И, явно указав ширину, даже если у вас было большое количество развернутого содержимого внутри этого контейнера, ваша ширина будет фактически заблокирована на 100% (или ширину окна браузера) независимо от указанного дочернего контента.

Вы можете использовать TRY и установить ширину 200%, что приведет к ее растяжению справа от родительского контейнера. Но эта ширина не будет определяться абсолютным позиционированным дочерним элементом и может быть недостаточно восприимчивой к вашим потребностям.

Как уже говорилось выше, нет чистого решения CSS для того, что вы пытаетесь сделать, и вам нужно будет использовать хотя бы некоторый javascript, чтобы выполнить то, что он звучит так, как вы пытаетесь выполнить.

источник

2013-07-05 16:47:29 relic

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

<body style="border:1px solid red;width:100%;"> 
    <div style="width:2000px;"> 
     <div style="position:absolute;left:2000px;"> 
      1 
     </div> 
    </div> 
<body>

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

источник

2013-07-05 16:54:43 Boynux

Установите ширину тела до 100% документ

ответ

Смежные вопросы