Jump to content
  • 0

Div блок и прокрутка


Жуля
 Share

Question

Есть всплывающий div блок, в который загружается текст для редактирования. Контейнер выставлен по центру left:50%; top:50%;

Проблема: когда разрешение небольшое, контейнер вылезает за границы экрана, прокрутка появляется, но сам блок остается отцентрованным и прокрутка на него не действует.

Как с таким бороться?

Параметры контейнера:

  #popup {
background-color: #FFFFFF;
position: fixed;
height:600px;
left:50%;
top:50%;
min-width: 300px;
z-index: 41;
}

Link to comment
Share on other sites

10 answers to this question

Recommended Posts

  • 0

Есть всплывающий div блок, в который загружается текст для редактирования. Контейнер выставлен по центру left:50%; top:50%;

Проблема: когда разрешение небольшое, контейнер вылезает за границы экрана, прокрутка появляется, но сам блок остается отцентрованным и прокрутка на него не действует.

Как с таким бороться?

Параметры контейнера:

  #popup {
background-color: #FFFFFF;
position: fixed;
height:600px;
left:50%;
top:50%;
min-width: 300px;
z-index: 41;
}

Замути абсолют, вместо фикседа.

Link to comment
Share on other sites

  • 0

Замути абсолют, вместо фикседа.

Пробовала, тогда шапочку контейнера почему-то обрезает при малых разрешениях.

В идеале хотелось бы как на фейсбук фотки показываются во всплывающем окне. Но в коде разобраться не осилила :(

Link to comment
Share on other sites

  • 0

Замути абсолют, вместо фикседа.

Пробовала, тогда шапочку контейнера почему-то обрезает при малых разрешениях.

В идеале хотелось бы как на фейсбук фотки показываются во всплывающем окне. Но в коде разобраться не осилила :(

А покажи пример того, что нужно. И ещё покажи скриншоты того, как нужно и как не нужно. И ссылку на тестовую страницу тож давай.

Link to comment
Share on other sites

  • 0

А покажи пример того, что нужно. И ещё покажи скриншоты того, как нужно и как не нужно. И ссылку на тестовую страницу тож давай.

Вот пример как не надо:

http://photo.linky.ru/11/

При уменьшении окна пропадает шапка окошка

--

Надо вот так:

f64c046a9fb8t.jpg

Там шапка привязана к верху экрана.

Edited by Жуля
Link to comment
Share on other sites

  • 0

Я не знаю как надо :unsure:

Думала, что css-ом можно было обойтись... Мне важно, чтобы окно можно было увидеть целиком с элементами управления. Можно его не по центру экрана лепить, а привязать к верхней части, это не принципиально.

Link to comment
Share on other sites

  • 0

Я не знаю как надо :unsure:

Думала, что css-ом можно было обойтись... Мне важно, чтобы окно можно было увидеть целиком с элементами управления. Можно его не по центру экрана лепить, а привязать к верхней части, это не принципиально.

Ага, ну кажись понял, но это уже надо на JS код писать, так что обратись ко мне на почту, пообщаемся. psywalker09@gmail.com

Link to comment
Share on other sites

  • 0

Не думала, что для этого надо мутить JS

А можете хотя б примерно указать в какую сторону копать, кинуть в меня ссылкой какой? Мож я и сама напишу :rolleyes:

Погоди, может я погорячился. Попробуй вот такой вариант

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Документ без названия</title>
</head>

<body>
<div style="position: fixed; width: 500px; top: 0; left: 0; height: 500px; background: red;">gdfd</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</body>
</html>

Link to comment
Share on other sites

  • 0

Че-то я жосско туплю: там в последнем примере есть функция по выравниванию окна по центру, ее и надо было бы править. Вот что значит использовать чужие решения :)

Спасибо за ваш вариант.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy