垂直對齊線條上方的div

Question

我有一個頁面底部的導航欄（高度爲110px）的網頁。我想要做的是在頁面的主要內容中設置2個浮動div，而不會溢出此導航欄。

我已經把它設置得很好，但是我正在努力讓div垂直對齊。

我有下面的CSS代碼設置：

#content { 
height: 100%; 
width:1200px; 
margin-left:10px; 
margin-right:10px; 
margin-top:10px; 
margin-bottom:10px; 
    top: 10px; 
position:absolute; 
overflow:hidden; 
z-index:1; 
} 

.container { 
padding: 5px 5px 5px 5px; 
} 

.container { 
margin:0 auto; 
} 


.clear { 
clear:both; 
} 

.left { 
float:left; 
display:inline; 
} 

.right { 
float:right; 
display:inline; 
} 

#left-column { 
float:left; 
display:inline; 
clear:both; 
width:550px; 
height:550px; 
padding-left:40px; 
background-color:#0F0; 
} 

#right-column { 
float:right; 
display:inline; 
clear:right; 
width:550px; 
height:550px; 
padding-right:40px; 
background-color:#F00; 
} 

的HTML很簡單：

<div id='content'> 
<div class='container'> 
<div id="left-column">content here</div> 
<div id="right-column">content here</div> 
<br class="clear" /> 
</div> 
</div> 

有誰知道我可以在屏幕上垂直對齊這些div？我確信有一些CSS代碼是不需要的 - 我只是從先前構建的頁面中取出它，所以請隨時告訴我如果需要刪除它的整個塊！ 目前divs浮在頁面的頂部。當我在Macbook Pro 13「屏幕上查看它時，它看起來很好，但只要有人在較大的瀏覽器窗口中查看頁面，它無疑會顯得非常糟糕，因爲div和導航欄之間存在大量空間...... 提前感謝！ JD

Answer 1

不知道是什麼樣子究竟是什麼你試圖讓，但嘗試看看這可以幫助你..

#content { 
position:absolute; 
top:0; 
left:0; 
width: 100%; 
height: 200%; 
overflow:auto; 
z-index:1; 
} 

.container { 
padding:5px; 
margin:0 auto; 
} 

#left-column { 
position: fixed; 
top: 50%; 
left: 10px; 
width:50%; 
height:200px; 
margin-top: -100px; 
background-color:#0F0; 
} 

#right-column { 
position: fixed; 
top: 50%; 
right: 10px; 
width:50%; 
height:200px; 
margin-top: -100px; 
background-color:#F00; 
} 

#menu { 
position: fixed; 
width: 100%; 
height: 110px; 
bottom:0; 
background-color: #ddd; 
} 
</style> 

<div id='content'> 
    <div id="left-column">content here</div> 
    <div id="right-column">content here</div> 
    <div id="menu">menu here</div> 
</div> 

可以根據你的需要調整寬度和高度等等。讓我知道你是否想要附近的東西