여백 최고 100 % - 부모의 높이 사업부

Question

나는 구축 할 수있는 다음과 같은 레이아웃 한 : 상단에서 100 % 배치 할

기본적으로

, 나는 헤더의 높이를 변화와 높이를 변화의 세 가지 div의 필요를 부모의 높이에서 헤더의 높이를 뺀 값. jQuery를 사용하여이 작업을 수행 할 수 있지만 반응 형 사이트이므로 가능하면 CSS 기반으로 유지하고 싶습니다 (그렇지 않은 경우 $(window).resize()을 처리해야합니다. 내 경험으로는 신뢰할 수 없습니다).

CSS3 calc 기능을 사용하면 가능합니까?

감사합니다.

Answer 1

그래서 콘텐츠 (오렌지 컨테이너)를 추가 시도 할 수는 파란색 컨테이너 떨어져 바닥에 충실 (당신이 오렌지 컨테이너에 position: absolute, 또는 margin-top을 사용할 수 있습니다 HTML 구조의 따라 다름) .

주황색 컨테이너 안에 헤더 (녹색) 컨테이너를 넣고 절대 상단 -100 % 위치에 놓을 수 있습니다 (주황색 위치는 absolute 또는 relatve이어야합니다).

html을 추가하면보다 정확한 해결책을 찾기 쉽습니다.

JSFIDDLE with an example

CSS :

.box{ 
    background: #f00; 
    height: 150px; 
    width: 100%; 
    position: relative; 
    padding: 20px; 
    padding-bottom: 0; 
} 
.column{ 
    background: #0f0; 
    width: 30%; 
    position: relative; 
    top: 100% 
} 
.header{ 
    position: absolute; 
    bottom: 100%; 
    width: 100%; 
    background: #00f; 
} 

HTML :이 솔루션을

<div class="box"> 
    <div class="column"> 
     <div class="header"> 
      header 
     </div> 
     aaaaaaa<br/> 
     aaaaaa 
    </div>  
</div> 

Answer 2

다음 CSS 규칙 시도해보십시오 height: calc(100% - header_height);

Answer 3

(만큼 그들은 맞게으로 열 임의의 수의 작동) :

1. 인라인 블록을 사용하여 결과를 정렬하십시오.
2. 블록을 파란색 상자의 맨 아래에 맞추려면 상대 위치 지정을 사용하십시오 (상단 수직 정렬이 필요함)
3. 녹색 블록을 절대 위치로 이동하여 흐름에서 오렌지색 상자를 남겨 둡니다. 청색 상자 하단)

body { 
 
    font: medium monospace; 
 
} 
 
.blue { 
 
    background: #AAF; 
 
    height: 12em; 
 
    text-align: center; 
 
} 
 
.helper { 
 
    display: inline-block; 
 
    width: 10em; 
 
    vertical-align: top; 
 
    position: relative; 
 
    top: 100%; 
 
} 
 
.green { 
 
    background: #CFC; 
 
    position: absolute; 
 
    bottom: 100%; 
 
    left: 0; 
 
    right: 0; 
 
} 
 
.orange { 
 
    background: #FCA; 
 
}

<div class="blue"> 
 
    <div class="helper"> 
 
    <div class="green"> 
 
     1<br/>2 
 
    </div> 
 
    <div class="orange"> 
 
     1<br/>2<br/>3 
 
    </div> 
 
    </div> 
 
    <div class="helper"> 
 
    <div class="green"> 
 
     1<br/>2<br/>3 
 
    </div> 
 
    <div class="orange"> 
 
     1<br/>2<br/>3<br/>4<br/>5 
 
    </div> 
 
    </div> 
 
    <div class="helper"> 
 
    <div class="green"> 
 
     1 
 
    </div> 
 
    <div class="orange"> 
 
     1<br/>2<br/>3<br/>4 
 
    </div> 
 
    </div> 
 
</div>