창 크기 조정 CSS HTML

Question

나는 이것을 할 수있는 한 간단하게 설명하려고한다. 가장 어려운 일은 아니지만 해결하기가 어렵지만 나는 그것에 어려움을 겪고있다.

이 내 HTML입니다 :

<div id="nav"> 
<div id="logo">Jack Thomson</div> 
<a href=".." class="active">Home</a> 
<a href=".." class="nav">About</a> 
<a href="/contact" class="nav">Contact</a> 
</div> 

<div id="content"> 

<p> 

Information here 

</p> 

</div> 

이 내 CSS입니다 :

#nav { 
margin : 70px 110px; 
width : 1100px; 
} 
#content { 
opacity : 0.5; 
background : #fff; 
width : 1020px; 
margin : 10px; 
margin-left : 100px; 
padding : 10px; 
border-radius : 5px 0; 
} 

그래서 내 코드의 일부 조각을 프로그래머. 창 크기를 조정할 때 #content의 크기를 조정하고 싶습니다. 창 크기를 조정할 때 내용 상자의 크기가 그대로 유지됩니다. 래퍼에 너비와 여백을 추가하려고했지만 작동하지 않습니다. 누구든지이 문제를 해결하는 방법을 알고 있다면 알려주십시오.

미리 제안 해 주셔서 감사합니다.

Answer 1

백분율로 작업 해보십시오. 그래서 예를 들면

는 :

아무리 큰 또는 작은 화면이 얼마나

width: 60%; 
height: 60%; 

, 내용이 60% 될 것입니다.

Answer 2

핵심은 #content의 너비와 높이에 대한 백분율을 사용하는 것입니다. 창과 함께 펼쳐지는 외부 컨테이너가있는 경우 외부 컨테이너의 위치를 ​​상대적으로 설정해야합니다. 그러면 # 내용의 너비와 높이가 외부 컨테이너의 백분율이됩니다. 이 경우 일반적으로 # 콘텐츠의 너비와 높이를 100 %로 설정합니다.

물론 html과 css의 많은 부분을 보면이 대답이 덜 막연합니다.