Jump to content
  • 0

Как сделать "резиновым" div по вертикали с прокруткой?


DeathError
 Share

Question

Есть сайт с "резиновым" дизайном. Есть необходимость использовать div со скроллбаром.

Если задавать фиксированные размеры для div'а, все нормально, "overflow: auto" создает

скроллбар когда необходимо. Но если размер div'а не указан (или 100% - то что надо

), растягивает div так, что видно только 1 строку. Как сделать ризивой div по вертикали с прокруткой?

6065911412_069e94b8bd_z.jpg

height:600px; - сейчас в работе. (height:100%; или height:auto!important; - не работаю корректно)

#mycustomscroll {
width: 100%;
min-height:auto!important;height:600px;max-height:100%;
margin: 0 0 0 0;
overflow: auto;
}

.scrollgeneric {
line-height: 1px;
font-size: 1px;
position: absolute;
top: 0; left: 0;
}

.vscrollerbase {
width: 10px;
background-color: white;
}
.vscrollerbar {
width: 10px;
background-color: black;
}
.hscrollerbase {
height: 10px;
background-color: white;
}
.hscrollerbar {
height: 10px;
background-color: black;
}

.scrollerjogbox {
width: 10px;
height: 10px;
top: auto; left: auto;
bottom: 0px; right: 0px;
background-color: gray;
}

......пропус.....

body
{
padding: 0;
margin:0;
color: #0F1419;
height:100%;
min-height:100%;

background-repeat: no-repeat;
background-attachment: fixed;
background-position: top left;
min-width: 700px;
overflow: hidden;
}

....пропуск........
.art-sheet
{
position: relative;
margin: 0 auto;
min-height: 15px;
margin-top: 47px;
margin-bottom: 0;
cursor:auto;
width: 90%;
min-width: 700px;
max-width: 1728px;

}

.art-sheet-body
{

position: relative;
padding: 4px;
padding-top:4px;
padding-bottom:0;

}

.......пропуск..........

.art-content-layout
{
display: table;
position:relative;
table-layout: fixed;
border-collapse: collapse;
background-color: Transparent;
border: none !important;
padding:0 !important;
width:100%;
opacity:.89;
filter: alpha(opacity=89);
-moz-opacity: 0.89;
margin-top:0;
margin-bottom:0; margin-left: 12px%;
margin-right: -15px;
background: #ffffff;
background-image:url(../images/boot.png);
background-attachment: fixed;
background-repeat: repeat-x;
background-position: bottom center ;
overflow: auto;

......пропуск.......
}

http://www.lesnitsyno.nichost.ru/index.php?option=com_content&view=article&id=3&Itemid=4

код css - слишком боьшой 2677 строк.

Link to comment
Share on other sites

8 answers to this question

Recommended Posts

  • 0

max-height:600px. Если текста будет больше, то появится скролл.

Если текст больше то подвал падает. А max-height:600px в данном случи работает также . Нужен %

Ну а как вы себе представляете резиновость и скролл? С какого момента тогда должен появляться второй? И как об этом должен узнать браузер?

Link to comment
Share on other sites

  • 0

max-height:600px. Если текста будет больше, то появится скролл.

Если текст больше то подвал падает. А max-height:600px в данном случи работает также . Нужен %

Ну а как вы себе представляете резиновость и скролл? С какого момента тогда должен появляться второй? И как об этом должен узнать браузер?

я во тоже второй день думаю над эти!может ещё толчковых div напихать? или походу css тут не обойтись и в помине((

Link to comment
Share on other sites

  • 0

ну можно задавать высоту в процентах, примерную. Остальное только через js, я думаю.

ну тода без выходу буду JScrollPane 2 впихивать http://www.xiper.net/collect/js-plugins/ui/jscrollpane2.html

Скрипт изменяет ширину scrollBox, тем самым автоматически меняя ширину .scroll-pane:

<script type="text/javascript"> 
jQuery('#more').click(function() {
jQuery('.scrollBox').css('width','300px');
jQuery('#pane').jScrollPaneRemove();
jQuery('#pane').jScrollPane({scrollbarWidth:18, showArrows:true});
});
</script>

отпишу что вышло.

Edited by DeathError
Link to comment
Share on other sites

  • 0

Попытка 1:

JScrollPane 2

инфа -> jscrollpane jscrollpane2

- отличный скрипт. Имеет довольно неплохие настройки. реакция на

width: 100%; - естественная и логичная (всё хорошо).Реакция на

height: 100%; - окно берёт заданный процент но какой бы не был процент скрол теряется т.е. высота скрола = 0, но текст уже не в скроле.

в отличии от скрипта fleXcroll http://www.hesido.com/flexcroll/contents.htm

где при применении height: 100%; вмести со скролом исчезает всё содержимое.

тут http://stud-arhiv.freedom-vrn.ru/test/

P.S. Кончилось кофе. Акт насилия продолжится.

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