Question

我正在尝试使用bootstrap完成一个页面，但我陷入一个简单的事情（不幸的是）

好吧，我这里有这个代码 - http://jsfiddle.net/tofanelli/1npw7x62/2/ - 我想让H3总是在顶部，粉红色区域总是在底部，但仍然在绿色区域的“内部”，无论有多少内容在页面中。

到目前为止，当我只有2或3个文本行时，所有内容都停留在移动视图中的页面中间。如何避免这种情况并使标题保持在顶部，粉红色区域位于底部？

你可以说“只是使用位置'固定'或'绝对'或'粘性'......我已经尝试了所有这些选项，但它们都没有真正按照我的意愿运作。

干杯=）

<div class="container-fluid">
<div class="row">
<div class="col-md-6 blue nopad" style="height:100vh;">
<img src="http://lorempixel.com/140/140/" /></div>
<div class="col-md-6 green">
<div class="col-md-12">
<h3>h3. Lorem ipsum dolor sit amet.</h3>
<p>Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. Aliquam eget sapien sapien. Curabitur in metus urna. In hac habitasse platea dictumst. Phasellus eu sem sapien, sed vestibulum velit. Nam purus nibh, lacinia non faucibus et, pharetra in dolor. Sed iaculis posuere diam ut cursus. <em>Morbi commodo sodales nisi id sodales. Proin consectetur, nisi id commodo imperdiet, metus nunc consequat lectus, id bibendum diam velit et dui.</em> Proin massa magna, vulputate nec bibendum nec, posuere nec lacus. <small>Aliquam mi erat, aliquam vel luctus eu, pharetra quis elit. Nulla euismod ultrices massa, et feugiat ipsum consequat eu.</small></p></div>
<div class="row">
<div class="col-md-12 pink"><img src="http://lorempixel.com/140/140/" />        </div>
</div>
</div>
</div>
</div>



.blue{
    background: blue;
}

.green {
    background: green;
    height: 100vh;
}
.pink {
    background: pink;
}

Answer 1

https://jsfiddle.net/JTBennett/1npw7x62/4/

position: fixed; top:0; <!---for sticking to the top of the window --->
position: absolute; bottom:0; <!---for sticking to the bottom of a div --->

检查此链接是否有关于每个职位值属性的书面记录：https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/

-Joel

[我采取了一些自由和中心对齐了两个div的内容 - 如果那不是你想要的话，道歉。

此外，如果向下滚动，您将看到标题div位于页脚div下 - 要解决此问题，请添加“z-index：9999;”到你的标题属性。]

Answer 2

这对你有用吗？

http://jsfiddle.net/1npw7x62/5/

.green {
    background: green;
    height: 100vh;
}
.pink {
    position:absolute;
    width: 100%;
    bottom: 0;
    background: pink;
}

在顶部和底部修复div

2 个答案: