修复股利和底部

我试图完成使用引导页面，但我被困在一个简单的事情（不幸）修复股利和底部

好了，我这里有这样的代码 - 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; 
}

来源

2015-11-03 Fabrizio Tofanelli

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;”到您的标题属性。]

来源

2015-11-03 04:12:27 Joel

嘿joel ...感谢您的帮助，但是这段代码并没有像预期的那样工作......它打乱了整个页面的布局......它与您发布的代码是否相同？ http://imgur.com/5iUqF5f –

你在那里的结果是由于我放在div上的宽度设置，因为我不知道你会有一个侧边栏。它们设置为100vw - 将其更改为反映布局的百分比或固定大小。您也可以尝试完全删除宽度规格。否则，您可以在jsfiddle上发布整个网站代码，我可以找到明确的原因。 – Joel

粉红色区域是100vw，因为我需要它在绿色区域的空间中填充整个宽度......这就是为什么......而绿色和蓝色区域需要为我的目的是50/50 ....但我会尝试给你一个镜头后，你给我这个代码....非常感谢= D –

将这项工作吗？

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

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

来源

2015-11-03 04:10:51 jnk

嘿....它几乎可以工作....它似乎“粉红色”区域漂浮在绿色区域，并不需要调整大小，当需要....头脑看一看？ –

修复股利和底部

回答

相关问题