CSS: начало полосы прокрутки от определенного div

Я делаю страницу, в которой часть заголовка исправлена, содержимое центра прокручивается. Я хочу, чтобы часть заголовка занимала целую страницу, включая область полосы прокрутки, и я хочу, чтобы полоса прокрутки появлялась из-под заголовка.CSS: начало полосы прокрутки от определенного div

.bg-dark{ 
 
    background:#3a3f51; 
 
} 
 
.bg-dark-header{ 
 
    position:fixed; 
 
    height: 60px; 
 
    width: 100%; 
 
    z-index:1000; 
 
    top: 0; 
 
    color:white; 
 
} 
 

 
.center_content{ 
 
    margin-top:40px; 
 
    height:600px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<div class="bg-dark bg-dark-header "> 
 

 
    Header Text 
 
</div> 
 

 
<div class="center_content text-center"> 
 
Center Content 
 
    Center ContentCenter ContentCenter ContentCenter ContentCenter Content 
 
</div>

Итак, я хочу прокрутки-бар от center-content DIV и часть заголовка должна занимать всю ширину.

Любая помощь будет отличной.

спасибо.

источник

2017-01-30 Anonymous

Вы можете использовать calc свойство, в вас дело .center_content{ height: calc(body height - header-height);}

.center_content { 
    margin-top: 60px; 
    height: calc(100vh - 60px); 
    overflow: auto; 
}

.bg-dark { 
 
    background: #3a3f51; 
 
} 
 
.bg-dark-header { 
 
    position: fixed; 
 
    height: 60px; 
 
    width: 100%; 
 
    z-index: 1000; 
 
    top: 0; 
 
    color: white; 
 
} 
 
.center_content { 
 
    margin-top: 60px; 
 
    height: calc(100vh - 60px); 
 
    overflow: auto; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<div class="bg-dark bg-dark-header "> 
 

 
    Header Text 
 
</div> 
 

 
<div class="center_content text-center"> 
 
    Center Content Center ContentCenter ContentCenter ContentCenter ContentCenter ContentCenter Content Center ContentCenter ContentCenter ContentCenter ContentCenter ContentCenter Content Center ContentCenter ContentCenter ContentCenter ContentCenter ContentCenter 
 
    Content Center ContentCenter ContentCenter ContentCenter ContentCenter ContentCenter Content Center ContentCenter ContentCenter ContentCenter ContentCenter ContentCenter Content Center ContentCenter ContentCenter ContentCenter ContentCenter ContentCenter 
 
    Content Center ContentCenter ContentCenter ContentCenter ContentCenter ContentCenter Content Center ContentCenter ContentCenter ContentCenter ContentCenter ContentCenter Content Center ContentCenter ContentCenter ContentCenter ContentCenter ContentCenter 
 
    Content Center ContentCenter ContentCenter ContentCenter ContentCenter ContentCenter Content Center ContentCenter ContentCenter ContentCenter ContentCenter ContentCenter Content Center ContentCenter ContentCenter ContentCenter ContentCenter ContentCenter 
 
    Content Center ContentCenter ContentCenter ContentCenter ContentCenter ContentCenter Content Center ContentCenter ContentCenter ContentCenter ContentCenter ContentCenter Content Center ContentCenter ContentCenter ContentCenter ContentCenter ContentCenter 
 
    Content Center ContentCenter ContentCenter ContentCenter ContentCenter ContentCenter Content Center ContentCenter ContentCenter ContentCenter ContentCenter ContentCenter Content Center ContentCenter ContentCenter ContentCenter ContentCenter ContentCenter 
 
    Content Center ContentCenter ContentCenter ContentCenter ContentCenter ContentCenter Content Center ContentCenter ContentCenter ContentCenter ContentCenter Content 
 
</div>

источник

2017-01-30 12:50:42

Благодарим вас за ответ, но полоса прокрутки скрывается за заголовком, который я не хочу. –

Проверьте обновленный ответ, указав 'margin-top: 60px', как и высота заголовка. –

все еще прокрутка скрывается за заголовком. Я хочу, чтобы полоса прокрутки запускалась из div-центра. –

Изменение вы Css к следующему:

body { 
    overflow: hidden; 
} 

.bg-dark{ 
    background:#3a3f51; 
} 
.bg-dark-header{ 
    position:fixed; 
    height: 60px; 
    width: 100%; 
    z-index:1000; 
    top: 0; 
    color:white; 
} 

.center_content{ 
    margin-top:60px; 
    height:600px; 
    overflow-y: auto; 
}

Она удаляет полосы прокрутки из всю страницу и добавляет b ars до .center_content.

Я также исправил margin-top .center_content, чтобы соответствовать высоте заголовка.

источник

2017-01-30 12:53:51 FioleNana

CSS: начало полосы прокрутки от определенного div

ответ

Смежные вопросы