CSS 100％高度問題

我有一個小型網站，我工作的地方基本上一切都是固定的，除了內容區域。我希望該內容區域一直展開到瀏覽器窗口的底部。當網站首次以1024x768的屏幕分辨率加載時，它看起來可以正常工作，但如果向下滾動複製，但彩色背景不會。我已經尋找解決方案，但迄今爲止我還沒有運氣。CSS 100％高度問題

下面是該網站的鏈接：www.atriaseniorliving.com/cah/our_process.html

編輯：

這裏是我使用的CSS：

#copyContainer { 
width: 1000px; 
height: 100%; 
top: 0; 
bottom: 0; 
left: 0; 
right: 0; 
margin: 0 auto; 
position: relative; 

font-family: 'Droid Serif'; 
font-size: 16px; 
line-height: 24px;

}

#mainCopy { 
display: block; 
width: 390px; 
height: auto !important; 
margin: 127px 0 0 0; 
padding: 30px; 
position:absolute; 
bottom:0; 
top:0; 
left:505px; 
right:0; 
z-index:99; 

-webkit-box-shadow: 0px 0px 10px 0px rgba(51, 51, 51, .6);

來源

2012-11-19 NickR

而不是鏈接到您的網站。我建議將你的問題代碼放在代碼塊中供其他人查看，或者甚至可以構建你的代碼的[小提琴]（http://jsfiddle.net/），它可以幫助人們確切地看到你的問題可能在哪裏。 – Malkus

我在主圖形頂部看到一個帶有藍色背景的垂直滾動條。滾動確定，但它與上面的塊重疊。在你的樣式表中嘗試** display：block; **。使用Firefox 16.02。 –

影響的大小填充元素。

你的風格大概這

display: inherit; 
width: 390px; 
height: auto; 
margin: 127px 0 0 0; 
padding: 30px 0px 0px 0px; 
position: absolute; 
top: 0; 
left: 505px; 
z-index: 99; 
-webkit-box-shadow: 0px 0px 10px 0px rgba(51, 51, 51, .6); 
box-shadow: 0px 0px 10px 0px rgba(51, 51, 51, .6);

來源

2012-11-19 20:10:18

刪除「bottom：0」使它不會一直擴展到瀏覽器窗口的底部。 – NickR

我認爲你正在使用height:100%錯誤...... height:100%指的是您的瀏覽器窗口的高度。而當內部元素的高度與他的父母相比時，你會怎麼想？這是你的情況：#mainCopy比瀏覽器窗口更高，因此比#copyContainer高。你只需要更新幾個樣式：

#copyContainer { 
    width: 1000px; 
    margin: 0 auto; 
    font-family: 'Droid Serif'; 
    font-size: 16px; 
    line-height: 24px; 
    height: 100%; 
} 
#mainCopy{ 
    display: block; 
    width: 390px; 
    margin: 127px 0 0 0; 
    padding: 30px; 
    float: right; //No need position:absolute 
    bottom: 0; 
    top: 0; 
    left: 505px; 
    right: 0; 
    z-index: 99; 
    -webkit-box-shadow: 0px 0px 10px 0px rgba(51, 51, 51, .6); 
    box-shadow: 0px 0px 10px 0px rgba(51, 51, 51, .6); 
} 
#middleContainer { 
    width: 100%; 
    background: #D9D9D9; 
    position: absolute; 
    top: 128px; 
    z-index: -1; //Because the image was over the text 
}

另一事情可以做，以提高你的代碼：

的標題沒有高度。具有高度不
您使用的是像3個diferents嵌套包裝
要多大用處的position:absolute和position:fixed無需
代替with:1000px使用with:960px
你是絕對定位的div使用margin-top:xxx代替top:xxx

來源

2012-11-19 22:02:06

只需從#mainCopy中刪除'bottom：0'即可。你的元素是絕對定位的，所以它只會到它的#copyContainer參考容器的底部。

來源

2012-11-19 22:17:57 Rob

CSS 100％高度問題

回答

相關問題