홈>
헤더가 50px, 본문이 100 %, 바닥 글이 50px가되도록 레이아웃을 설정하는 방법이 있습니까?
몸이 최소한 전체 시청 영역을 사용하고 싶습니다. 바닥 글과 머리글을 항상 화면에 표시하고 싶습니다
-
답변 # 1
-
답변 # 2
Andreas Winter 솔루션의 해결책 :
http://jsfiddle.net/5V288/7/
* 해답을 사용하면 내용이 사용 가능한 창 영역보다 큰 경우 문제가 발생합니다.
-
답변 # 3
찾고 싶은 것은 "다중 절대 좌표"라고 생각합니다. 여기리스트에 대한 설명이 있지만 기본적으로 몸의 위치를 절대로 지정하고 두 가지 모두를 설정하면됩니다. 그리고
top: 50px
:bottom: 50px
http://www.spookandpuff.com/examples/absoluteCoordinates.html은이 기법을 더 예쁘게 보여줍니다.
<body> <style> #header { position: absolute; height: 50px; } #body { position: absolute; top: 50px; bottom: 50px; background-color: yellow; } #footer { position:absolute; height: 50px; bottom: 0; } </style> <div id="header">Header</div> <div id="body">Content goes here</div> <div id="footer">Footer</div>
관련 자료
- html - 머리글과 바닥 글의 높이 100 % 높이
- collapsable - React Native에서 Animated API로 머리글과 바닥 글을 동시에 숨기는 방법
- python - 모듈과 헤더 파일의 차이점은 무엇입니까?
- Android의 ConstraintLayout에서 고정 머리글 바닥 글 및 스크롤 가능한 본문 텍스트를 설정하는 방법
- html - 내 탐색 모음과 헤더 이미지 사이의 간격을 제거하려면 어떻게합니까?
- swift - Js 및 iOS-14를 사용하여 WKWebView에서 머리글 및 바닥 글을 숨기는 방법
- html - 바닥 글은 페이지 콘텐츠 아래에 배치되지 않고 뷰 포인트 높이에 배치됩니다
- reactjs - 가변 상자 열 사이의 동적 높이 수직선
- c# - 게임 오브젝트 간 포인트 호의 높이 제어
- 반응 탐색 클래스 구성 요소 내 스택 탐색기 헤더 높이 가져 오기 (후크 없음)
- html - 기본 div와 바닥 글 사이의 공백
- ios - UITableView에서 헤더의 올바른 높이를 계산하는 방법
- magento의 모든 페이지에서 머리글 및 바닥 글 사용자 정의
- javascript - 다른 HTML 문서의 "header"및 "footer"요소를 참조하기 위해 HTML 문서를 얻으려면 어떻게해야합니까?
- javascript - 반응 탐색 헤더의 높이를 변경하는 방법
- ios - 반응 탐색에서 머리글과 TabBar 사이의 표시 영역의 크기를 어떻게 얻습니까?
관련 질문
- html - 부트 스트랩 4에서 반응 형 문제를 해결하는 방법
- html - 벽돌 레이아웃 그림자가 잘립니다
- html - 본문 태그의 배경 이미지가 표시되지 않습니까?
- javascript - 난수로 버튼을 클릭하면 div의 너비를 줄입니다
- html - navbar React에 이미지 로고와 브랜드 이름을 멋지게 배치
- html - 요소가 주변 요소의 위치를 변경하지 못하도록 방지
- html - CSS를 사용하여 카드 크기를 조정하는 방법
- html - 제목 텍스트/본문 텍스트로 div 상자를 만드는 방법
- javascript - 가로 스크롤 가능 컨테이너를 만드는 방법에 여러 행이 포함되어 있습니다
- html - 부트 스트랩 - colapse 아코디언이 작동하지 않음
jsfiddle에서 예제를 만들었습니다 :
업데이트 된 JsFiddle : http://jsfiddle.net/5V288/1025/
HTML :
CSS :
테두리 상자가 없으면 내용의 높이는 100 % + 140 픽셀입니다. 테두리 상자를 사용하면 컨텐츠 높이가 100 %가되고 패딩이 내부에있게됩니다.