0

Можно ли реализовать этот пример без вложенного div, чтобы был только div id="container"

<div id="container">
    <div id="content"></div>
</div>


div#container {
    height: 200px;
    width: 300px;
    overflow-y: scroll;
    margin: 10px;
    border: 1px solid #000
}
div#content {
    height: 1000px;
}
::-webkit-scrollbar {
    width: 10px;
    height: 25px;
   margin:150px;
}
::-webkit-scrollbar-thumb {
    height: 6px;
    border: 4px solid rgba(0, 0, 0, 0);
    background-clip: padding-box;
    -webkit-border-radius: 7px;
    background-color: rgba(0, 0, 0, 0.15);
    -webkit-box-shadow: inset -1px -1px 0px rgba(0, 0, 0, 0.05), inset 1px 1px 0px rgba(0, 0, 0, 0.05);
}
::-webkit-scrollbar-button {
    width: 0;
    height: 0;
    display: none;
}
::-webkit-scrollbar-corner {
    background-color: transparent;
}

вот пример http://jsfiddle.net/Zkolya_linkoln/6KprJ/440/ Заранее спасибо!

1 ответ 1

1

Вложенный див в данном случае определил высоту контента - благодаря ему скролл появляется даже с пустым блоком внутри. Если внутри будет достаточно контента - скролл появится и без вложенного блока

    <div id="container">
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
   </div>

body {
    min-height: 1000px
}
div#container {
    height: 200px;
    width: 300px;
    overflow-y: scroll;
    margin: 10px;
    border: 1px solid #000
}

::-webkit-scrollbar {
    width: 10px;
    height: 25px;
   margin:150px;
}
::-webkit-scrollbar-thumb {
    height: 6px;
    border: 4px solid rgba(0, 0, 0, 0);
    background-clip: padding-box;
    -webkit-border-radius: 7px;
    background-color: rgba(0, 0, 0, 0.15);
    -webkit-box-shadow: inset -1px -1px 0px rgba(0, 0, 0, 0.05), inset 1px 1px 0px rgba(0, 0, 0, 0.05);
}
::-webkit-scrollbar-button {
    width: 0;
    height: 0;
    display: none;
}
::-webkit-scrollbar-corner {
    background-color: transparent;
}

Пример: http://jsfiddle.net/2zsnyg4f/

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.