修復股利和底部

我試圖完成使用引導頁面，但我被困在一個簡單的事情（不幸）修復股利和底部

好了，我這裏有這樣的代碼 - 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

嘿....它幾乎可以工作....它似乎「粉紅色」區域漂浮在綠色區域，並不需要調整大小，當需要....頭腦看一看？ –

修復股利和底部

回答

相關問題