베이스 라인 탐색 바 위로 divs를 수직으로 정렬

Question

페이지 아래쪽에 탐색 바가있는 웹 페이지가 있습니다 (높이 110px). 내가 뭘 하려는지이 탐색 모음을 오버플로하지 않고 페이지의 주요 콘텐츠에서 서로 옆에 부동 div를 설치하는 것입니다.

나는 모두 괜찮 았지만 div를 수직으로 정렬하는 데 어려움을 겪고 있습니다.

I가 다음과 같은 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에 가까운 경우 알려 주시기 바랍니다