Как сделать контент фиксированным внутри прокрутки div, используя только css?

Question

Как показано на рисунке ниже, я хочу, чтобы синий div был зафиксирован на своем месте даже после прокрутки div «Hello World». Я пробовал это http://jsfiddle.net/9v6xwkk2/3/, но не смог его получить. пожалуйста, помогите мне и спасибо заранее.

<div class="container"> 
<div class="inner"> 
<div class="full-height"> 
    Fix unscrollable content 
</div> 
    <div style="width:400px;height:400px;background:black:color:white">Hello World</div> 

</div> 
</div> 

Answer 1

Вы можете попробовать, как это -

* { box-sizing: border-box; } 
 
.container { 
 
    position: relative; 
 
    height: 256px; 
 
    width: 256px; 
 
} 
 
.inner { 
 
    float: left; 
 
    margin-right: 16px; 
 
    border: solid 1px red; 
 
    overflow: auto; 
 
    height: 256px; 
 
    width: 100%; 
 
} 
 
.full-height { 
 
    \t background: blue; 
 
    bottom: 17px; 
 
    color: white; 
 
    left: 1px; 
 
    position: absolute; 
 
    width: 238px;; 
 
}

<div class="container"> 
 
    <div class="inner"> 
 
     <div style="width:400px;height:400px;background:black:color:white">Hello World</div> 
 
    </div> 
 
    <div class="full-height"> 
 
     Fix unscrollable content 
 
    </div> 
 
</div>

Надеюсь, это поможет вам.

Answer 2

Если вы хотите колонтитулы быть закреплен в нижней части, вы можете использовать position:fixed свойство.

http://jsfiddle.net/g65nn980/

* { box-sizing: border-box; } 

.container { 
    position: relative; 
    border: solid 1px red; 
    height: 256px; 
    width: 256px; 
    overflow: auto; 

    float: left; 
    margin-right: 16px; 
} 

.inner { 
    position: relative; 
    height: 100%; 
} 
.full-height { 
    position:fixed; 
    bottom:0; 
} 
} 

.full-height { 
    position: absolute; 
    bottom:0; 
    width: 100%; 
    color:white; 
    background: blue; 
} 

Answer 3

Пожалуйста, попробуйте это:

* { box-sizing: border-box; } 

.container { 
    position: relative; 
    border: solid 1px red; 
    height: 256px; 
    width: 256px; 
    overflow: auto; 

    float: left; 
    margin-right: 16px; 
} 

.inner { 
    position: relative; 
    height: 100%; 
} 

.full-height { 
    position: fixed; 
    bottom:0; 
    width: 100%; 
    color:white; 
    background: blue; 
} 

DEMO