100 % 높이 빼기 헤더?
이 질문에 이미 답변이 있습니다.
패널의 레이아웃을 만들고 싶지만 관리자 브라우저 창의 100 %에 항상 #nav 및 #content 컨테이너를 가져 오는 방법을 선택합니다. 100 % 높이의 상속을 이해하지 못합니다. 누군가 더 명확하게 설명 할 수 있습니까?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>index.htm</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div id="header">
<img src="./img/header_logo.png" alt="bla"/>
</div><!-- #header -->
<div id="nav">
</div><!-- #nav -->
<div id="content">
asfdg
</div><!-- #content -->
<div class="clear">
</div>
</body>
</html>
main.css
html, body{
font-family: Helvetica, "Helvetica Neue", Arial, Geneva, sans-serif;
margin: 0px;
padding: 0px;
height: 100%;
}
img{
margin: 0px;
padding: 0px;
border-width: 0px;
}
#wrapper{
}
#header{
background: url(img/header_bg.png) repeat-x;
height: 65px;
padding-top: 20px;
padding-left: 25px;
}
#nav{
width: 235px;
float: left;
background-color: #f7f7f7;
border-right: 1px solid #d9d9d9;
height: 100%;
}
#content{
float: left;
width: auto;
padding: 15px;
}
.clear{
clear: both;
}
어떤 아이디어?
브라우저가 CSS3를 지원하는 경우 CSS 요소를 사용합니다. Calc()
height: calc(100% - 65px);
브라우저 옵션을 추가 할 수도 있습니다.
height: -o-calc(100% - 65px); /* opera */
height: -webkit-calc(100% - 65px); /* google, safari */
height: -moz-calc(100% - 65px); /* firefox */
또한 값 사이에 공백이 있는지 확인하십시오. https://stackoverflow.com/a/16291105/427622를 참조하십시오.
주석에서 언급했듯이 height : 100 %는 명시 적으로 정의 된 상위 컨테이너의 높이에 의존합니다. 원하는 것을 달성하는 한 가지 방법은 절대 / 상대 위치를 사용하고 left / right / top / bottom 속성을 지정하여 사용 가능한 공간을 채우기 위해 콘텐츠를 "늘리기"하는 것입니다. 나는 jsfiddle 에서 달성하고자하는 것을 수집 했습니다 . 결과 창의 크기를 조정하면 내용이 자동으로 크기가 조정되는 것을 볼 수 있습니다.
귀하의 경우이 접근 방식의 한계는 헤더 콘텐츠를위한 공간을 만들기 위해 콘텐츠를 오프셋하기 위해 부모 컨테이너에 명시적인 margin-top을 지정해야한다는 것입니다. 그래도 자바 스크립트를 던지면 동적으로 만들 수 있습니다.
"브라우저 창의 100 %"에 대해 말 그대로 이것이 의미하는 경우 고정 위치를 사용해야합니다. 그런 다음 top, bottom, right 및 left 속성을 사용하여 뷰포트의 각 가장자리에서 div 가장자리를 오프셋합니다.
#nav, #content{position:fixed;top:0px;bottom:0px;}
#nav{left:0px;right:235px;}
#content{left:235px;right:0px}
이렇게하면 왼쪽 235 픽셀이 탐색에 할당되고 화면의 오른쪽 나머지 부분이 콘텐츠에 할당되는 화면이 설정됩니다.
그러나 전체 화면을 한 번에 스크롤 할 수는 없습니다. overflow:autodiv 에 적용 하여 두 창을 개별적으로 스크롤하도록 설정할 수 있습니다 .
참고 : 고정 위치 지정은 IE6 또는 이전 버전에서 지원되지 않습니다.
참고 URL : https://stackoverflow.com/questions/10197565/100-height-minus-header
'ProgramingTip' 카테고리의 다른 글
| HttpServletRequest- 쿼리 인용 데이터 변수 가져 오기, 양식 없음 (0) | 2020.11.14 |
|---|---|
| Firebug 또는 기타를 사용하여 WS / WSS Websocket 요청 콘텐츠를 보는 방법은 무엇입니까? (0) | 2020.11.14 |
| Maven에서 BOM 파일을 사용하는 방법은 무엇입니까? (0) | 2020.11.14 |
| adb 명령에서 기기 정보 (예 : 제품, 모델) 가져 오기 (0) | 2020.11.14 |
| VSCode의 .js 파일에서 jsx 코드를 주석 처리하는 방법은 무엇입니까? (0) | 2020.11.14 |