如何仅使用 css 使内容固定在滚动 div 内？

Question

如下图所示，我希望蓝色 div 即使在滚动 "Hello World" 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

请试试这个：

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

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>

希望对你有所帮助

如何仅使用 css 使内容固定在滚动 div 内？

how to make content to be fixed inside scroll div using only css?

html

css

scrollbar