CSS - 남은 공간을 채우기 위해 Div의 크기 설정

저는 CSS를 처음 접해서 템플릿의 베어 본 구조를 만들려고 노력합니다.CSS - 남은 공간을 채우기 위해 Div의 크기 설정

헤더의 주 콘텐츠는 &입니다. 내 바닥 글 & 머리글 괜찮지 만 머리글 & 머리글 사이의 나머지 공간을 채우려면 주 콘텐츠 div가 필요합니다. padding-bottom 속성을 바닥 글과 같은 높이로 설정하려고했지만 바닥 글의 틈을 닫지 않아 div의 높이를 padding-bottom 값으로 설정했습니다.

내 HTML

<!DOCTYPE html> 
<HTML> 
    <HEAD> 

     <LINK type="text/css" rel="stylesheet" href="main.css"/> 
     <TITLE>Template</TITLE> 

    </HEAD> 
    <BODY> 
     <div id="container"> 

      <div class="header"></div> 

      <div class="main-content"></div> 

      <div class="footer"></div> 

     </div> 
    </BODY> 
</HTML>

그리고 캐스 케이 딩 스타일 시트.

#container{ 

    min-height:100%; 
    position:relative; 

} 

.header{ 

    border:2px dashed blue; 
    height:150px; 
    border-radius:5px; 
    padding:10px; 
} 


.main-content{ 


    border:2px dashed blue; 
    border-radius:5px; 
    padding:10px; 
    padding-bottom:100px; 



} 

.footer{ 
    position:absolute; 
    bottom:0; 
    width:100%; 
    height:100px; 
    border:2px dashed blue; 
    border-radius:5px; 




} 

html, body{ 
    margin:0; 
    padding:1px; 
    height:100%; 
}

출처

2014-04-27 Derek

당신은 또한 당신의 .main-content

.main-content { 
    border:2px dashed blue; 
    border-radius:5px; 
    padding:10px; 
    height: calc(100% - 300px);  
}

Demo

에 대한 calc()을 사용할 수 있습니다, 나는 예를 들어, 당신은 더 이상 padding-bottom 필요하지 않습니다, 여기 저기 불통 몇 가지를했습니다 또한 min-height: 100%;을 사용하는 대신 height: 100%;을 사용해야하며 대문자 - 소문자 태그는 사용하지 말고 글을 쓰는 습관을 길러야합니다 태그는 소문자 만 사용하십시오.

출처

2014-04-27 09:17:55

도움을 주셔서 감사합니다. 선을 넘어서 서버 측 개발자로 일하고 있습니다. 감사합니다. – Derek

CSS - 남은 공간을 채우기 위해 Div의 크기 설정

답변

관련 문제