Div 자가 적응 높이 해결 방법
6494 단어 div
div 고도 적응 은 비교적 번 거 로 운 문제 이다. 친구 artery 에 게 서 이 글 을 보고 많은 문 제 를 해결 해 주 었 다. 발췌 했다.
Div 즉, 부모 용 기 는 내용 에 따라 높이 에 적응 하지 않 습 니 다. 우 리 는 아래 의 코드 를 봅 니 다.
<div id="main">
<div id="content"></div>
</div>콘 텐 츠 내용 이 많 을 때 main 이 높이 100% 또는 auto 를 설정 하 더 라 도.브 라 우 저 에 따라 자동 스 트 레 칭 이 제대로 되 지 않 습 니 다.내용 의 높이 는 비교적 높 지만 용기 main 의 높이 는 여전히 벌 릴 수 없다.
우 리 는 세 가지 방법 을 통 해 이 문 제 를 해결 할 수 있다.
1 부모 용기 가 높이 를 알 수 있 도록 부동 을 제거 합 니 다.떠 다 니 는 용기 에 빈 칸 이 있 음 을 주의 하 십시오.
<div id="main">
<div id="content"></div>
<div style="font: 0px/0px sans-serif;clear: both;display: block"> </div>
</div>2 용 기 를 추가 하여 코드 에 존재 하지만 시각 적 으로 보이 지 않 습 니 다.
<div id="main">
<div id="content"></div>
<div style="height:1px; margin-top:-1px;clear: both;overflow:hidden;"></div>
</div>3 BR 을 추가 하고 스타일 을 clear: both 로 설정 합 니 다.
<div id="main">
<div id="content"></div>
<br style="clear:both;" />
</div>보충:
<div id="main">
<div id="content">
<p>demo1</p>
<p>demo2</p>
<p>demo3</p>
</div>
</div>
#main { border:1px solid #999999; background-color:#CCCCCC; height:100%; overflow:hidden;}
#content { float:left;}상기 세 가지 방법 은 모두 가장 좋 은 해결 방법 이 아니다. 왜냐하면 프로그램 코드 관념 에서 의미 없 는 태그 코드 를 추가 하지 말 라 고 제창 하기 때문이다.
제 해결 방법 을 소개 하 는 것 은 가장 바깥쪽 div 에 다음 과 같은 스타일 을 추가 하 는 것 입 니 다.
#main {
height:100%;
overflow:hidden;
}나의 주해:
업무 중 에 발생 한 문제, baidu 를 살 펴 보 았 습 니 다. 아직 모든 방법 을 시험 해 볼 시간 이 없습니다. 현재 사용 하고 있 는 것 은 세 번 째 방법 입 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
🧙🏼 HTML 구조를 나타내는 요소: 컨텐츠 분할 요소 : 블록 레벨 요소 : 플로우 콘텐츠를 위한 통용 컨테이너 (순수 컨테이너로서 아무것도 표현안함) : 인라인 컨테이너 : 인라인 레벨 요소 🌵 span (인라인 요소) vs div(블록 요소) ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
