2列css底部定位

我有一個2列布局，窗口大小的高度爲100％。在左側，我有一個圖像，我想要佔據位於包裝底部的窗口大小的90％。在右側，我有頂部的文字，我想佔據50％的高度，並且低於50％的高度。我希望兩個圖像都能響應窗口大小，但不會溢出到頁面中的其他元素上。2列css底部定位

這裏是我的小提琴http://jsfiddle.net/jfarr07/7TctY/2/

HTML

<div class="background"> 
<div class="wrapper"> 
    <div class="leftside"> 
<div class="imgspacer"></div> 
<div class="img"></div> 
    </div> 
    <div class="rightside"> 
     <div class="text">lakjsd;lfjas;ldjf;alsdjf;lasdlkfjas;ldjf;alsdjf;laksjdfl;kasjdf</div> 
     <div class="rightimage"></div> 
    </div> 
</div> 
</div>

CSS

body,html { 
    height:100%; 
    min-height:100%; 
} 

.background { 
    background-size:cover; 
    height:100%; 
    min-height:100%; 
    background-color:#333; 
} 

.wrapper { 
    width:90%; 
    margin:0 auto; 
    height:100%; 
    min-height:100%; 
    background-color:#fff; 
} 

.leftside { 
    height:100%; 
    min-height:100%; 
    width:50%; 
    float:left; 
} 

.imgspacer { 
    height:10%; 
    background-color:#222; 
    width:100%; 
} 

.img { 
    height:90%; 
    background-image:url(http://1.bp.blogspot.com/-CnXnB1TnnhE/UVc8czYpDUI/AAAAAAAAAP8/FXezUtrUeMU/s1600/Jared-allen.jpg); 
    width:100%; 
    background-repeat:no-repeat; 
} 

.rightside { 
    background-color:#888; 
    width:50%; 
    height:100%; 
    min-height:100%; 
    float:right; 
} 

.text { 
    width:100%; 
    height:50%; 
} 

.rightimage { 
    width:100%; 
    height:50%; 
    background-image:url(http://1.bp.blogspot.com/-CnXnB1TnnhE/UVc8czYpDUI/AAAAAAAAAP8/FXezUtrUeMU/s1600/Jared-allen.jpg); 
    background-repeat:no-repeat; 
}

來源

2013-06-03 jacks3

另外，如果你想看看我正在嘗試完成訪問http://www.jonasandnicole.com其第三部分與「我們有所作爲」。這是目前我在哪裏，但東西溢出，並沒有正確調整大小。 – jacks3

你可以在div的底部放置一個元素而不使用絕對定位？ – jacks3

我認爲，所有你缺少的是background-size: contain;。這是你在找什麼？

http://jsfiddle.net/7TctY/5/

編輯 - background-size: cover;也工作在某些情況下，但在這種情況下，它被切斷圖像不期望的方式。

來源

2013-06-03 18:18:30

這個作品，但唯一的問題是圖像被切斷... – jacks3

background-size：contains !!! :) – jacks3

很高興你明白了！ –

2列css底部定位

回答

相關問題