Div не центрируется по горизонтали на экране при прокрутке влево и вправо

  • Автор темы Goodmonday
  • 77
  • Обновлено
  • 15, May 2024
  • #1
У меня есть простая HTML-страница с кодом CSS. Надеюсь, вы уловите суть. Когда я изменяю размер окна (от большего к меньшему) и прокручиваю страницу влево и вправо, текст «Все работает нормально» остается на своем месте. Это исправлено и работает нормально.

Но текст «Это не работает, ОК» не будет центрироваться, если я прокручиваю страницу влево и вправо.

Это основная проблема.

Этот div должен всегда, даже после прокрутки страницы влево и вправо, располагаться по центру по горизонтали и внизу страницы, а не внизу экрана.
 <div style="width: 1050px; top: 0; left: 50%; margin-left: -525px; position: fixed; z-index: 10;">

This is working OK

</div>

<div style="white-space: nowrap; margin-left: auto; margin-right: auto; margin-top: 150px; overflow: visible;">

Here is text which is so long that a horizontal scrollbar will be needed for the browser window

</div>

<div style="clear: both; position: relative; overflow: hidden; width: 1050px; margin-left: auto; margin-right: auto;">

<div style="position: relative; clear: both;">

<div style="clear: both; width: auto; margin-left: 30px; margin-right: 30px;">

This is not working OK

</div>

</div>

</div>
HTML: Спасибо за вашу помощь!

Goodmonday


Рег
11 Sep, 2012

Тем
1

Постов
1

Баллов
11
  • 18, May 2024
  • #2
1. Что заставляет этот текст продолжаться, не прерываясь, так это пробел: nowrap; Просто удалите его, и ваш текст будет прекрасно «складываться». В противном случае он будет продолжать выталкивать все за пределы экрана по мере добавления текста. 2. Почему бы не использовать ширина: авто; максимальная ширина: 1050 пикселей; или ширина: 100%; максимальная ширина: 1050 пикселей; вместо ширины: 1050 пикселей;? Таким образом, ваша ширина будет равна 1050 пикселей, но элемент div будет плавным.

Чего я не понимаю, так это почему содержимое вашего первого div почти не видно (кажется, так и должно быть), когда эти два установлены там, где они есть: left: 50%; поле слева: -525 пикселей; ?
 

Елизавета Sadorozhnaya


Рег
28 Jan, 2012

Тем
4

Постов
8

Баллов
48
  • 21, May 2024
  • #3
Хорошо.

Почему именно 1050px? Вы уверены, что люди всегда будут смотреть это на экране Full HD? Если вам нужен нижний колонтитул внизу контента, просто поместите после контента и установите для контента минимальную высоту (если применимо) или просто позвольте потоку позаботиться о том, что вам нужно.

Но не стоит делать заданную ширину.
https://jsfiddle.net/07uwc3r6/

(перетащите строку «javascript» влево, чтобы увидеть содержимое/нижний колонтитул в действии).
 

ssazonov


Рег
06 Nov, 2014

Тем
0

Постов
1

Баллов
1
  • 04, Jun 2024
  • #4
Если ваша диаграмма текстовая, удалите ширина: 1050 пикселей; верх: 0; осталось: 50%; поле слева: -525 пикселей; положение: фиксированное; и вместо этого разместите его в относительном положении и присвойте ему те же размеры ширины, что я предложил там: ширина: 100%; максимальная ширина: 1050 пикселей; Я согласен с @PoPSiCLe: «Я бы посоветовал вам переосмыслить, как вы это делаете».
 

aaTropp


Рег
01 Jan, 2011

Тем
1

Постов
3

Баллов
13
  • 06, Jun 2024
  • #5
Затем, если страница слишком мала для отображения диаграммы в полном размере, добавьте ссылку на полноразмерное изображение. Тогда вы сможете получить огромную диаграмму, не испортив страницу. Вы никогда не замечали галереи изображений, которые ссылаются на полноразмерные изображения?
 

JokerFox


Рег
22 Jun, 2013

Тем
1

Постов
3

Баллов
13
  • 08, Jun 2024
  • #6
Вот пример. Хорошо:
 <div style="border: 1px solid blue; white-space: nowrap;">

<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p>

<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p>

<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p>

<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p>

<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p>

<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p>

<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p>

<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p>

<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p>

<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p>

<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p>

<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p>

<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p>

<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p>

<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p>

<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p>

<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p>

<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p>

<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p>

<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p>

<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p>

<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p>

<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p>

<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p>

<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p>

<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p>

</div>

<div style="width: 1050px; border: 1px solid red; left: 50%; margin-left: -525px; position: fixed; text-align: center;">

This is the footer

</div>
HTML: Но когда текста становится больше и нижний колонтитул выходит за пределы экрана, он исчезает. Как я могу это исправить?
 <div style="border: 1px solid blue; white-space: nowrap;"> <p>The content goes here.


Whatever I want to display on the page itself gets put here.

The content goes here.

Whatever I want to display on the page itself gets put here.

The content goes here.

Whatever I want to display on the page itself gets put here.</p> </div> <div style="width: 1050px; border: 1px solid red; left: 50%; margin-left: -525px; position: fixed; text-align: center;"> This is the footer </div>
Код (разметка):
 

vasiliy1221


Рег
09 Sep, 2012

Тем
0

Постов
3

Баллов
3
  • 10, Jun 2024
  • #7
Я бы посоветовал вам переосмыслить то, как вы это делаете, поскольку ваш образ мышления совершенно неправильный.

Зачем нужно, чтобы эти элементы были зафиксированы (по ширине и размеру)? Позвольте им адаптироваться к размеру области просмотра, чтобы они работали правильно независимо от размера экрана.

Кроме того, почему все так ясно: и то, и другое; на всех дивах? Они не служат никакой цели.
 

djotr


Рег
14 Feb, 2013

Тем
1

Постов
3

Баллов
13
Тем
49554
Комментарии
57426
Опыт
552966

Интересно