센터 DIV

나는 다음과 같은 특성을 가진 페이지에 사업부를 중심으로 할 필요가

이

폭 페이지가 80 %
폭과 높이 (예 : 너비 : 980px, 최소 높이 : 588px 및 최대 너비 : 1170px, 최대 높이 : 1170px)를 최소 및 최대 너비 및 높이 (예 : 너비 : 100 %, 높이 : 60 % 702px)
페이지 크기를 조정하면 div가 세로 및 가로 방향으로 페이지에 비례하여 크기가 조정됩니다 (페이지 크기를 조정하면 수직으로 만 세로로 창 크기를 조정해야 함)

도와 줄 수 있습니까? 감사합니다.

---- HTML

<div id="content"> 
    <div id="box"> 
     text 
    </div> 
</div>

---- CSS

<style type="text/css"> 
    #content { 
     width:80%; 
     background:#000; 
     margin:0 auto; 
    } 
    #box{ 
     width:100%; 
     height:60%; 
     background:red; 
     min-width:980px; 
     min-height:588px; 
     max-width:1170px; 
     max-height:702px; 
    } 
</style>

출처

2014-06-20 spark87

[jsfiddle] (http://fiddle.jshell.net/)에 코드를 입력 할 수 있습니까? 도움을받는 것이 더 쉽습니다. (도우미는 솔루션을 테스트 할 수 있습니다.) –

http://jsfiddle.net/webtiki/rmuL9/ –

또한 수직적으로 구성된 경우 CSS를 읽는 사람들에게 도움이됩니다. –

체크 아웃 여기에 업데이트 된 바이올린.

http://jsfiddle.net/rmuL9/10/

난 당신이 브라우저의 크기를 변경할 때 중앙 심지어 상자를 배치 할 #box의 CSS

position: absolute; 
left: 0; 
right: 0; 
top: 0; 
bottom: 0; 
margin: auto;

에 추가했습니다.

출처

2014-06-20 12:02:25

고맙습니다. 너비를 최대 너비와 높이 최소로 조정하고 싶습니다 ... 가로 세로 비율을 – spark87

@ spark87 "으로 유지하면서 최소 가로 세로 비율을 유지하십시오 "- div이기 때문에 쉽게 CSS를 사용할 수 없습니다. 당신은 자신의 스크립트를 작성해야합니다 .. 또는 일부 플러그인을 둘러보십시오 ... –

@ 틸윈 조이 감사합니다! 비율을 기준으로 크기를 조정할 가능성이 있습니까? 크기를 조정할 때 최대 폭과 높이를 사용하고 div 상자의 크기를 변경하지 않습니다. – spark87

답변

관련 문제