텍스트와 같은 거대한 콘텐츠 세부 정보를 넣을 때마다 컨테이너에서 나가는 내용에 따라 컨테이너 높이를 자동으로 조정하려면 어떻게해야합니까?
#container {
background-color: #262626;
width: 1000px;
min-height: 200px;
margin: 0 auto;
margin-top: 40px;
padding-top: 20px;
-webkit-border-top-left-radius: 30px;
-webkit-border-top-right-radius: 30px;
-moz-border-radius-topleft: 30px;
-moz-border-radius-topright: 30px;
border-top-left-radius: 30px;
border-top-right-radius: 30px;
}
#main {
position: relative;
top: 116px;
width: 980px;
height: 700px;
float: left;
background-color: #262626;
padding: 10px 10px;
margin-bottom: 40px;
background: -webkit-linear-gradient(#262626,#101010); /* For Safari */
background: -o-linear-gradient(#262626,#101010); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#262626,#101010); /* For Firefox 3.6 to 15 */
background: linear-gradient(#262626,#101010); /* Standard syntax */
-webkit-box-shadow: 0 10px 6px -6px black;
-moz-box-shadow: 0 10px 6px -6px black;
box-shadow: 0 10px 6px -6px black;
-webkit-border-bottom-right-radius: 30px;
-webkit-border-bottom-left-radius: 30px;
-moz-border-radius-bottomright: 30px;
-moz-border-radius-bottomleft: 30px;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 30px;
}
당신의에서 #MainCSS를 당신은 당신의 높이를하는 설정했습니다 700px.
이것을 다음으로 변경하십시오.
height:auto;
잘 작동합니다. 그러나 이것이 기본값이므로 대신이 높이 선언을 완전히 제거 할 수도 있습니다.
또는 최소 높이 를 원하는 경우 다음 과 700px같이 말하십시오.
min-height:700px;
물론 설정할 수있는 높이의 다른 '버전'이 많이 있습니다. 포함 (단, 이에 국한되지 않음) :
min-height CSS 속성은 주어진 요소의 최소 높이를 설정하는 데 사용됩니다. height 속성의 사용 된 값이 min-height에 지정된 값보다 작아지는 것을 방지합니다.
max-height CSS 속성은 주어진 요소의 최대 높이를 설정하는 데 사용됩니다. height 속성의 사용 된 값이 max-height에 지정된 값보다 커지는 것을 방지합니다.
블록 수준 요소에서 line-height CSS 속성은 요소 내에서 줄 상자의 최소 높이를 지정합니다.
모두 원하는 방식으로 요소를 설정하는 데 사용할 수 있습니다.
여기에 참조 링크 가 있습니다.
높이 속성의 MDN 요약
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다