html 레이아웃 - 크기 조정을하지 못하도록 요소를 방지합니다.

Question

div가 특정 비율 (너비와 높이)을 차지하는 HTML 페이지를 만들고 싶습니다. 그리고 창 크기를 조정할 때 내부 요소의 크기가 조정되지 않았습니까?

예 :

/* CSS */ 

#left-content-area { 
    position: fixed, 
    width: 19%, 
    height: 60%, 
    left: 27%, 
    top: 20% 
} 

<!-- Html --> 

<div id="left-content-area"> 
    First name: <input type="text" id=first_name_id" style="width=90%"> 
    Last name: <input type="text" id=last_name_id" style="width=90%"> 
    Phone number: <input type="text" id=phone_number_id" style="width=90%"> 
    Address: <input type="text" id=address_id" style="width=90%"> 
    <!-- 
    And more.... 
    --> 
</div> 

내가 대신 다시 크기에서 입력 필드를 방지하기 위해 픽셀에 하드 와이어 그것을해야합니까?

Answer 1

요소에 백분율을 지정하지 마십시오.

pixel, em, rem을 사용할 수 있습니다.

당신이 분 값을 제공 같은 비트를 "재생"할 다음 당신은 여전히 ​​예를 들어 폭 (비율) 및 최소 폭에 사용할 수있는 비율에 따라 확장하는 경우 (픽셀) 또한

https://developer.mozilla.org/en-US/docs/Web/CSS/min-width

필요없는 경우 인라인 스타일을 사용하지 않는 것이 좋습니다.

그냥 당신이 부모 요소의 크기를 조정하면 영향을주지 않습니다 있는지 확인 px 같은 비 동적 단위로 작성 같은 당신은 있어야합니다

.class { 
    width:90%; 
    min-width:100px; 
} 

Answer 2

폭을 보길 원하는 모든 입력에 클래스를 추가 자식 요소의 너비.

#left-content-area { 
    position: fixed; 
    width: 19%; 
    height: 60%; 
    left: 27%; 
    top: 20%; 
    min-width: 150px; 
} 
#left-content-area input{ 
    width:140px; 
} 

Answer 3

그래서 나는 제대로 작동한다고 생각합니다. 몇 가지 오류가있었습니다. 쉼표를 CSS에서 세미콜론으로 변경하고 각 입력 유형의 스타일 태그에서 =를 다음으로 변경했습니다.

/* CSS */ 

#left-content-area { 
    position: fixed; 
    width: 19%; 
    height: 60%; 
    left: 27%; 
    top: 20% 
} 

/* HTML */ 

<div id="left-content-area"> 
    First name: <input type="text" id=first_name_id" style="width: 90%"> 
    Last name: <input type="text" id=last_name_id" style="width: 90%"> 
    Phone number: <input type="text" id=phone_number_id" style="width: 90%"> 
    Address: <input type="text" id=address_id" style="width: 90%"> 
<!-- 
And more.... 
--> 
</div> 

이 기능이 작동하는지 알려주세요. 감사합니다