>

헤더가 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>

  • 이전 트리거에서 WPF 설정 테두리 배경
  • 다음 java - 어설 션을 사용합니까?