ベースラインのナビゲーションバーの上に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コードがあると確信しています - 私は単に以前に構築されたページからそれを取ったので、必要に応じて全体のチャンクを削除するように教えてください！ 現在、divはページの上部に浮いています。私が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> 

あなたはすることができますあなたのニーズに応じて幅と高さなどを微調整してください。sumthingに近いものがあれば教えてください