Jump to content
  • 0

Возможно ли overflow scroll дива вынести на край браузер

barman

Asked by barman,

 Share

Question

barman Explorer

barman

Posted
Posted

Нужно чтобы скрол дива находился не внутри него, а на краю браузера. Подскажите как реализовать.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<style type="text/css">
body {
  margin: 0;
  padding: 0;
}
#wrap {
 height: 500px; width: 600px;/* размер */
 position: absolute;
 left: 50%; margin-left: -300px;/* отцентровка */
 background: white;
 overflow: scroll;
}
</style>
<div id="wrap">
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.   Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.<br />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.   Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.<br />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.   Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.<br />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.   Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.<br />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.   Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.<br />
</div>
</body>
</html>

Link to comment
Share on other sites

42 answers to this question

Recommended Posts

  • 0
psywalker Explorer

psywalker

Posted
Posted

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

нет, блок должен быть фисированный.

Так твой-то блок внутренний так и останется фикс, как и щас. Растянется только родитель.

Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted

Спасибо psywalker! :) Только скролл у меня не на всю высоту браузера. Так как у меня там используется еще блок впереди.

Вот: http://jsfiddle.net/cCBcT/embedded/result/

Как сделать на всю высоту страницу?

А ты же сказал, что он по высоте фикс тоже?

Тогда сделай его 100% по высоте.

Link to comment
Share on other sites
  • 0
barman Explorer

barman

Posted
  • Author
Posted

Спасибо psywalker! :) Только скролл у меня не на всю высоту браузера. Так как у меня там используется еще блок впереди.

Вот: http://jsfiddle.net/cCBcT/embedded/result/

Как сделать на всю высоту страницу?

А ты же сказал, что он по высоте фикс тоже?

Тогда сделай его 100% по высоте.

фикс то нужен

а с фиксом никак?

хм трудная задачка....

Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted

Спасибо psywalker! :) Только скролл у меня не на всю высоту браузера. Так как у меня там используется еще блок впереди.

Вот: http://jsfiddle.net/cCBcT/embedded/result/

Как сделать на всю высоту страницу?

А ты же сказал, что он по высоте фикс тоже?

Тогда сделай его 100% по высоте.

фикс то нужен

а с фиксом никак?

хм трудная задачка....

Ну так ты и так вроде фикс сделал по высоте и ширине, что тебе ещё не хватает?))

Link to comment
Share on other sites
  • 0
barman Explorer

barman

Posted
  • Author
Posted

Я пытаюсь сделать скролл на всю высоту браузера+сбоку, который будет крутить)) содержимое фиксированного по центру странице дива

К боку получилось пришпандорить, а вот только скролл не на всю высоту браузера, он короткий и по центру края экрана.

Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted

Я пытаюсь сделать скролл на всю высоту браузера+сбоку, который будет крутить)) содержимое фиксированного по центру странице дива

К боку получилось пришпандорить, а вот только скролл не на всю высоту браузера, он короткий и по центру края экрана.

Так, ясно, а сам блок в середине с контентом тоже должен быть на весь экран по высоте?

Link to comment
Share on other sites
  • 0
barman Explorer

barman

Posted
  • Author
Posted

Я пытаюсь сделать скролл на всю высоту браузера+сбоку, который будет крутить)) содержимое фиксированного по центру странице дива

К боку получилось пришпандорить, а вот только скролл не на всю высоту браузера, он короткий и по центру края экрана.

Так, ясно, а сам блок в середине с контентом тоже должен быть на весь экран по высоте?

нет.

кстати, вот посмотри второй вариант: http://jsfiddle.net/YRsnZ/embedded/result/

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

Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted

А я не пойму, зачем тебе вообще делать див абсолют? Почему бы просто не растянуть див на всю страницу, выровнять его по середине, а скролл пусть так и будет на боди.

Link to comment
Share on other sites
  • 0
barman Explorer

barman

Posted
  • Author
Posted

А я не пойму, зачем тебе вообще делать див абсолют? Почему бы просто не растянуть див на всю страницу, выровнять его по середине, а скролл пусть так и будет на боди.

Абсолют для того чтобы применить left.

А я же див #wrap и так ратянул, а как его выровнить по середине? Я выровнил по середине внутренний блок #text.

А скролл не на всю страницу так как в переди блок #bar

http://jsfiddle.net/cCBcT/4/embedded/result/'>http://jsfiddle.net/cCBcT/4/embedded/result/

http://jsfiddle.net/cCBcT/4/

Насчет фикса передумал, ну растянул по высоте 100%, теперь скролл стал обрубком, в верхнем примере заметишь.

Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted

А я не пойму, зачем тебе вообще делать див абсолют? Почему бы просто не растянуть див на всю страницу, выровнять его по середине, а скролл пусть так и будет на боди.

Абсолют для того чтобы применить left.

А я же див #wrap и так ратянул, а как его выровнить по середине? Я выровнил по середине внутренний блок #text.

А зачем тебе его выравнивать? Тебе нужно выровнять внутренний блок с контентом, как у тебя сейчас и сделано. И вообще давай уже, показывай скриншоты, как тебе нужно и как не нужно.

Link to comment
Share on other sites
  • 0
barman Explorer

barman

Posted
  • Author
Posted

Кстати сделал, как ты сказал http://jsfiddle.net/YHaSm/embedded/result/

Но мне не нужно, чтоб серый блок проходил под синим(покрути)

Так расставь всем z-index; нужный.

Сделаю (хотя никогда не работал з-индексом, покурю матерьялы сайта =)).

Спасибо! Сорр, если надоел =)

Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted

Кстати сделал, как ты сказал http://jsfiddle.net/YHaSm/embedded/result/

Но мне не нужно, чтоб серый блок проходил под синим(покрути)

Так расставь всем z-index; нужный.

Сделаю (хотя никогда не работал з-индексом, покурю матерьялы сайта =)).

Спасибо! Сорр, если надоел =)

Да ладно, я терпеливый :) Но всё равно на будущее не парь никого :D

Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted

Снова :)

7f84baf1844eb47224bb204af70db59e.png

з-индекс, не то. я плохо объяснил.

на скрине:

красным выделено содержимое блока, мне нужно чтобы оно не выходило за зеленую границу

Ну значит сделай от верха отступы сколько нужно, а не 0.

Link to comment
Share on other sites
  • 0
barman Explorer

barman

Posted
  • Author
Posted

Снова :)

7f84baf1844eb47224bb204af70db59e.png

з-индекс, не то. я плохо объяснил.

на скрине:

красным выделено содержимое блока, мне нужно чтобы оно не выходило за зеленую границу

Ну значит сделай от верха отступы сколько нужно, а не 0.

я же сделал отступ margin-top у #wrap в коде посмотри ttp://jsfiddle.net/YHaSm/

Link to comment
Share on other sites
  • 0
buddah Explorer

buddah

Posted
Posted (edited)

Пфффф....Так у тебя же fixed для bar.... Сначала не заметил.

Сделай вместо фиксед absolute, и для wrap задай padding-top нужное значение чтоб серый блок оказался как раз внизу синего.

Edited by buddah
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
Go to question listing
×
×
  • 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

  I accept