如何使用css使内容在scroll div中修复？

Question

如下图所示，即使在滚动“Hello World”div之后，我也希望将蓝色div固定在其位置。我试过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

如果要将页脚固定在底部，可以使用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 2

请尝试这个：

double result = a-b;

DEMO

Answer 3

你可以这样试试 -

* { 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 {
   	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>

我希望它会对你有所帮助。