垂直对齐线条上方的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> 

可以根据你的需要调整宽度和高度等等。让我知道你是否想要附近的东西