% -height 및 100 % 콘텐츠 섹션이있는 고정 헤더
Velth
% -height 속성이있는 고정 헤더를 갖고 싶습니다. 헤더 아래 섹션은 페이지의 나머지 높이를 차지해야합니다. 예 : header = 10 % 다른 모든 섹션은 최소 90 %입니다. 이것은 관련 질문과 유사합니다 : CSS 고정 머리글 / 바닥 글 및 완전히 확장 된 중간 영역? ,하지만 그는 고정 px-height를 사용하고 있지만 % -height를 원합니다. 내 섹션에 여백을 사용하려고했지만 작동하지 않는 것 같습니다. 내 섹션에 여백과 90 % 높이를 사용하는 것이 작동하지 않는 것 같습니다.
잠시 동안 나는 http://jsfiddle.net/K9m63/을 생각 해낼 수있었습니다 . 그러나 몇 가지 문제 :
- 첫 번째 섹션은 헤더 아래에서 사라집니다.
- 포인트 1 때문에 섹션 div가 너무 커서 나머지 크기를 차지하지 않습니다.
HTML
<header>
<nav>Test</nav>
</header>
<section>
<div class="container yellow">1</div>
</section>
<section>
<div class="container pink">2</div>
</section>
<section>
<div class="container purple">3</div>
</section>
CSS
body, html {
height: 100%;
}
header {
height: 10%;
background-color: green;
position: fixed;
top: 0px;
width: 100%;
}
.helper {
display: inline-block;
height: 100%;
vertical-align: middle;
}
.nav-image {
vertical-align: middle;
}
section {
height: 100%;
width: 100%;
background-color: red;
}
.container {
width: 72.8125%;
background-color: blue;
margin: 0px auto;
height: 100%;
}
.yellow {
background-color: yellow;
}
.pink {
background-color: pink;
}
.purple {
background-color: purple;
}
감사!
Hiral
가능한 해결책:
모든 섹션을 2 개 div로 래핑했습니다.
<div class="wrapper">//rest 90% of the page
<div class="wrapper2">//100% of parent
<section>
<div class="container yellow">1</div>
</section>
<section>...
</div>
</div>
CSS :
.wrapper {
min-height:90%;
height:auto !important;
position:relative;
top:10%;
}
.wrapper2 {
height:100%;
width:100%;
position:absolute;
}
또한, 추가 z-index:1;로 header.
여기에 바이올린이 업데이트 되었습니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
에서 수정
관련 기사
Related 관련 기사
- 1
고정 하위 헤더 및 스크롤 가능한 콘텐츠가있는 고정 헤더
- 2
고정 헤더가있는 가로 및 세로 스크롤 가능 콘텐츠
- 3
헤더, 콘텐츠 및 바닥 글이있는 100 % 높이의 Asp.net html 레이아웃
- 4
플렉스 콘텐츠 및 헤더가있는 고정 크기 부트 스트랩 패널
- 5
가로 스크롤 콘텐츠가있는 고정 헤더
- 6
콘텐츠 상단을 숨기는 고정 헤더
- 7
부트 스트랩이있는 고정 헤더 및 섹션 앵커
- 8
다중 콘텐츠 길이 헤더 및 다중 전송 인코딩 헤더
- 9
콘텐츠 높이 100 % 설정 jquery mobile
- 10
뷰포트 스크롤링 콘텐츠가있는 헤더 100 % 너비
- 11
내 콘텐츠 뒤에 정적 헤더 바가 있습니다.
- 12
콘텐츠가 스크롤되는 동안 헤더를 고정하는 방법
- 13
자바의 응답으로 콘텐츠 헤더 이름 설정
- 14
고정 div가있는 slideDown () 및 나머지 콘텐츠 푸시
- 15
100 % 높이 div 및 고정 헤더가있는 여백은 실제로 100 %가 아닙니다.
- 16
Android에서 콘텐츠 헤더가 잘리는 것을 읽고 있습니까?
- 17
Shopify 재정렬 섹션 및 편집 가능한 콘텐츠?
- 18
Tableview에서 특정 콘텐츠 위에 헤더를 exectaly 설정하는 방법
- 19
고정 헤더는 Angular를 사용하여 콘텐츠에 이벤트 스크롤이 없습니다.
- 20
웹 페이지 콘텐츠를 고정 헤더 위로 스크롤하는 방법은 무엇입니까?
- 21
GmailApp.sendmail에서 콘텐츠 유형 및 MIME 버전 헤더를 설정하는 방법은 무엇입니까?
- 22
Safari에서 페이지로드시 고정 헤더 아래에 콘텐츠 "슬라이드"가 표시됨
- 23
고정 된 투명 헤더 아래에 스크롤 된 콘텐츠를 숨기는 방법
- 24
고정 헤더 높이를 기준으로 콘텐츠 상단 여백 오프셋
- 25
동적 헤더 크기가있는 Div 및 스크롤 막대가있는 콘텐츠
- 26
jQuery로 고정 헤더를 추가 할 때 콘텐츠 문제
- 27
100 % 높이 "창"이있는 고정 테이블 헤더
- 28
콘텐츠 높이를 본문 높이의 100 %로 설정
- 29
보이는 콘텐츠 섹션에 비례하여 헤더 섹션의 위치 변경
몇 마디 만하겠습니다