height:100% 2, 3에 대해서.
4462 단어 height
먼저 다음 CSS 코드를 살펴보십시오.
1 div {
2 height: 100%;
3 }HTML 코드:
1 <!doctype html>
2 <html>
3 <head></head>
4 <body>
5 <p> </p>
6 <div></div>
7 </body>
8 </html>의심할 여지없이div의height:100%는 전혀 작용하지 않는다. (다행히 나는 당시에div의 높이가 p의 높이와 같다고 생각했다. 바디의 높이가 p에 의해 벌어진 후에 100%가 작용했다. 허허, too young too simple) 그리고 지금 생각해 보면 height:100%는 작용하지 않는다. 완전히 논리에 부합된다.바디 요소가 Height를 설정하지 않은 상황에서 높이는 스스로 적응하기 때문에 만약에 div의 Height:100%가 작용한다면 바디의 높이는 반드시 벌어질 것이다. 이때 바디의 높이는 ===div의 높이*2이고 div의 양식은 Height:100%로 중국의 과학 발전관에 완전히 부합되지 않는다!!!
이 문제를 해결하려면 다음과 같은 CSS 코드를 추가하십시오.
1 htm, body {
2 height: 100%;
3 }이런 식으로 보면 원소가 절대적이지 않고 고정된 상황에서 Height:100%가 작용하려면 이 원소의 부원소의 Height를 반드시 설정해야 한다.
그렇다면 지금의 문제는 왜 부원소가 Height를 설정했는지, 그 자원소의 Height: 100%가 작용하는가?
부모 요소가 높이를 설정한 후에 그 높이는 고정값이다. 어떤 하위 요소가 Height:100%를 설정해도 그 높이는 증가하지 않는다. 그리고 브라우저가 요소에 대한 오버플로우의 기본값은visible이기 때문에 작용한다.
이어서 하위 원소가 절대 포지셔닝으로 설정되면 부모 원소가 높이를 설정하지 않아도 이 하위 원소의height:100%가 작용할 것이다. 절대 포지셔닝된 하위 원소는 부모 원소의 높이와 너비를 펼치지 않기 때문에 과학 발전관에 부합된다!!!
응답식 레이아웃을 한 적이 있는 사람들은 모두 알고 있다. 나는 어떤div의 높이가 화면의 크기에 따라 달라진다고 생각하지만 이div가 Margin이나padding의 효과를 가지게 하고 싶다. div가 절대적으로 위치를 정한 후에height:100%를 설정하면 Margin이나padding을 설정하면 난잡한 질문이 있을 것이다.해결 방안은 아래 코드로 실현할 수 있습니다...
1 div {
2 position: absolute;
3 height: auto;
4 left: 0;
5 top: 0;
6 right: 0;
7 bottom: 0;
8 margin: 20px;
9 }이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
INFO: Font Metrics and the Use of Negative lfHeightThe following illustrations show the most commonly used font metrics, including Character Height, which is selected with...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
