머리글 및 바닥 글 높이에 따라 높이가 달라지는 동적 내용

Question

머리글, 바닥 글 및 내용의 3 가지 요소가 포함 된 페이지를 만들려고합니다. 이름에서 알 수 있듯이 머리글이 맨 위, 바닥 글이 바닥에, 내용이 중간에 있어야합니다. 나는 이미 레이아웃을 만들었는데, 헤더와 푸터가 있어야 할 위치에 놓 였지만, 내용이 겹치거나 다른 방법으로 내용이 더 작아지기 마련이다.

제 문제는 머리말과 꼬리말이 여러 가지 용도로 사용된다는 것입니다. 따라서 높이에 있어서는 동적입니다.

머리글과 바닥 글간에 어떤 내용이 겹치지 않고 내용을 채울 수있는 방법이 있습니까?

가능한 경우 순수한 CSS를 선호하지만 가능하지 않은 경우 JavaScript 제안을 원합니다. :)

고마워요!

편집 : 이것은 내가 ATM을 얻은 것입니다.

<div class="container"> 
    <div id="header"></div> 
    <div id="footer"></div> 
    <div id="content"></div> 
</div> 

CSS : 바닥 글에 대한

#content { 
    position:absolute; 
    background: url('img/textures/fabric.png'); 
    background-color: gray; 
    height:auto; 
    width:auto; 
    margin:0 auto 0 48px; /* Center content */ 
    left:0; 
    right:0; 
    top:0; 
    bottom:0; 
    text-align:center; 
} 

#dashtop { 
    position:fixed; 
    width:auto; 
    background-color:aqua; 
    opacity: .5; 
    margin-left: 48px; 
    top:0; 
    left:0; 
    right:0; 
    text-align:center; 
} 

#footer { 
    position: fixed; 
    margin-left: 48px; 
    background-color:green; 
    bottom:0; 
    right:0; 
    left:0; 
    width:auto; 
    height:auto; 
    text-align:center; 
    opacity:0.5; 
    z-index:0; 

}

Answer 1

을 사용하여 상대 위치를 모두 헤더와 내용 (어떤 위치 속성)에, 고정 사용하십시오 위치.