홈>2020-02-01 01:19

html - 머리글과 바닥 글 사이의 DIV 높이를 100 %로 만드는 방법

헤더가 50px, 본문이 100 %, 바닥 글이 50px가되도록 레이아웃을 설정하는 방법이 있습니까?

몸이 최소한 전체 시청 영역을 사용하고 싶습니다. 바닥 글과 머리글을 항상 화면에 표시하고 싶습니다

답변 # 1

jsfiddle에서 예제를 만들었습니다 :

업데이트 된 JsFiddle : http://jsfiddle.net/5V288/1025/

HTML :

<body>
    <div id="header"></div>
    <div id="content"><div>
        Content 
    </div></div>
    <div id="footer"></div>
</body>

CSS :

html { height: 100%; }
body {
    height:100%;
    min-height: 100%;
    background: #000000;
    color: #FFFFFF;
    position:relative;
}
#header {
    height:50px;
    width:100%;
    top:0px;
    left:0px;
    background: #CCCCCC;
    position:fixed;
}
#footer {
    height:50px;
    width:100%;
    bottom:0px;
    left:0px;
    background: #CCCCCC;
    position:fixed;
}
#content {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    height:100%;
    padding: 0 20px;
}
#content > div {
    padding: 70px 0;
}

테두리 상자가 없으면 내용의 높이는 100 % + 140 픽셀입니다. 테두리 상자를 사용하면 컨텐츠 높이가 100 %가되고 패딩이 내부에있게됩니다.

답변 # 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>

Python2.net

html - 머리글과 바닥 글 사이의 DIV 높이를 100 %로 만드는 방법

관련 자료