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
barman Explorer

barman

Posted
  • Author
Posted

Что не то? Сделай как я говорю.

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

мне нужен фиксированный #bar.

если бы он не был фикс то я не открывал бы этот топик :)

Link to comment
Share on other sites
  • 0
buddah Explorer

buddah

Posted
Posted (edited)

Так при position:fixed твой bar всегда будет оставаться в одном месте экрана и все остальное будет уходить под него. Поставь его в самом верху, пусть не будет фона сверху, тогда и серый блок не будет виден над синим. Ну а серый отодвинуть под синий. Тогда при прокрутке синий будет наезжать на серый, но будет создаваться эффект как будто серый прячется в синем.

Edited by buddah
Link to comment
Share on other sites
  • 0
barman Explorer

barman

Posted
  • Author
Posted

Так при position:fixed твой bar всегда будет оставаться в одном месте экрана и все остальное будет уходить под него. Поставь его в самом верху, пусть не будет фона сверху, тогда и серый блок не будет виден над синим.

1)не могу отказаться от отступа

2)бар полупрозрачный в оригинале

да я знаю что при моем коде все так и должно быть

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

Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted

Что не то? Сделай как я говорю.

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

мне нужен фиксированный #bar.

если бы он не был фикс то я не открывал бы этот топик :)

Да оставь ты этот бар, он у тебя вообще отдельно. Я говорю про отступы у главных блоков.

Link to comment
Share on other sites
  • 0
buddah Explorer

buddah

Posted
Posted

Так при position:fixed твой bar всегда будет оставаться в одном месте экрана и все остальное будет уходить под него. Поставь его в самом верху, пусть не будет фона сверху, тогда и серый блок не будет виден над синим.

1)не могу отказаться от отступа

2)бар полупрозрачный в оригинале

да я знаю что при моем коде все так и должно быть

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

Есть одна идея - поставить верхний кусочек (между синим и верхней границей браузера) тоже блоком с fixed и задать ему бекграунд как у фона.

Link to comment
Share on other sites
  • 0
barman Explorer

barman

Posted
  • Author
Posted (edited)

Так при position:fixed твой bar всегда будет оставаться в одном месте экрана и все остальное будет уходить под него. Поставь его в самом верху, пусть не будет фона сверху, тогда и серый блок не будет виден над синим.

1)не могу отказаться от отступа

2)бар полупрозрачный в оригинале

да я знаю что при моем коде все так и должно быть

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

Есть одна идея - поставить верхний кусочек (между синим и верхней границей браузера) тоже блоком с fixed и задать ему бекграунд как у фона.

не

в оригинале бэкграунд с облаками и при том еще растягивается по размеру браузера cover

Edited by barman
Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted

Тему закрываем? :)

Ты уже решил?

нет. мне кажется моя задумка посредствам хтмл и ксс не реальна =)

Вот тут чё за тема? http://jsfiddle.net/YHaSm/embedded/result/

Что нужно тут исправить, чтобы твоя задумка осуществилась?

Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted

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

Чтобы содержимое блока не было видно за зеленой границей(скрин)

7f84baf1844eb47224bb204af70db59e.png

Так а почему нельзя у блока серого сделать осттуп сверху?

Link to comment
Share on other sites
  • 0
barman Explorer

barman

Posted
  • Author
Posted

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

Чтобы содержимое блока не было видно за зеленой границей(скрин)

7f84baf1844eb47224bb204af70db59e.png

Так а почему нельзя у блока серого сделать осттуп сверху?

дело в том что он есть. кстати на скрине я поскролил вниз

Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted

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

Чтобы содержимое блока не было видно за зеленой границей(скрин)

7f84baf1844eb47224bb204af70db59e.png

Так а почему нельзя у блока серого сделать осттуп сверху?

дело в том что он есть. кстати на скрине я поскролил вниз

Да нет, там совсем не то, нужно делать так:

#wrap {

width: 100%;

position: absolute;

top: 70px;

bottom: 0;

}

Link to comment
Share on other sites
  • 0
barman Explorer

barman

Posted
  • Author
Posted (edited)

Да нет, там совсем не то, нужно делать так:

#wrap {

width: 100%;

position: absolute;

top: 70px;

bottom: 0;

}

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

________________________________________

завтра попробую так

сделаю див #top помещу в него #bar

задам #top высоту 80px, #bar 60px

центрую по вертикали #bar внутри #top

а теперь самое главное, задам #top тот же фон что и у body , и будет казатся что фон целый

вставляю остальной код #wrap и #text

юпи!

теперь

при прокрутки серый блок #text не будет виден под фоном блока #top

buddah предлагал два блока перед и после #bar, но с фоном был бы геморой

:)

Edited by barman
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