두 div에 대한 세로 맞춤 및 간격

세로 정렬 문제가 있습니다. 나는 2 div가있다. 처음에는 자동 높이 (브라우저 크기에 따라 다름)가 있고, 다른 하나는 높이가 고정되어 있으며 페이지 하단에 위치합니다. 또한 두 번째 사업부는 마진이 필요합니다.두 div에 대한 세로 맞춤 및 간격

내가 뭘 원하는지의 정확한 예 :

http://img199.imageshack.us/img199/9569/79106387.jpg

내가 시도는 :

<html> 
<body> 
<style> 
* { margin: 0; padding: 0; } 
body { background: #a7daf6; } 
</style> 

<div style="width:200px; height:100%; position:absolute; background:#000; opacity:0.6"> </div> 

<div style="width:200px; height:40px; position:absolute; background:#eee; bottom:0; opacity:0.6"> </div> 

</body> 
</html>

그러나 나는 두 번째 DIV에 여유를 줄 수 없다. 어떤 아이디어?

출처

2011-02-02 mrpn

질문은 어떻게 든 사라져야합니까? – sunn0

'margin-top'을 적용 할 때 무엇을 기대합니까? – Sotiris

에서 margin-top을 제거, 당신은 단순히 첫 번째 <div>에이 스타일을 적용 할 수 top:-42px.

<div> 안에 콘텐츠가 필요한 경우 <div>에 padding-top: 42px을 추가 할 수 있습니다. 모든 요소를 문서의 흐름에서 제거한다 절대 위치를 부여

Live Demo

<div style="width:200px; height:100%; position:absolute; background:#000; opacity:0.6; top:-42px"> 
    <div style="padding-top:42px; color:#fff">hello</div> 
</div>

출처

2011-02-02 22:49:11 thirtydot

고맙습니다. 이것이 내가 원하는거야 – mrpn

먼저 DIV이를 추가하려고 :

<div style="width:200px; position:absolute; top:0px; bottom: 42px; background:#000; opacity:0.6"> </div>

내가 제대로 이해하고 두 번째

출처

2011-02-02 22:46:02 atlavis

이 하나도 작동합니다. 고마워요 – mrpn

+1, 내 대답보다 낫다. – thirtydot

이 추천

. 다른 요소는 영향을받지 않습니다.

출처

2011-02-02 22:57:23

두 div에 대한 세로 맞춤 및 간격

답변

관련 문제