Bourbon Neat : 외부 컨테이너와 일치하도록 열을 확장하는 방법?

Question

Bourbon Neat을 테스트하고 있는데, 바깥 쪽 컨테이너 안에 두 개의 열이 있고, 열이 동일한 높이가되도록 (가장 큰 열만큼 키가 크도록) 싶습니다. 짧은 열에 @include fill-parent를 사용하면 작동하지 않고 외부 컨테이너만큼 넓게 만듭니다. 내가 자바 스크립트에서 할 수있는,하지만 깔끔한이 처리합니까? 여기

<section class="blog"> 

<article> 
    <h1>How to set up Bourbon Neat</h1> 
    <h2>Installing and using Bourbon</h2> 
    <p>Install bourbon by going to your users directory in git bash, and typing: gem install bourbon</p> 
    <p>Then change directory to your style folder and type in git bash: bourbon install</p> 
    <p>Then, import the mixins at the top of your stylesheet(s): @import 'bourbon/bourbon'</p> 
    <h2>Installing and using Neat</h2> 
    <p>Install neat by going to your users directory in git bash, and typing: gem install neat</p> 
    <p>Then change directory to your style folder and type in git bash: install neat</p> 
    <p>Then, import the mixins at the top of your stylesheet(s): @import 'bourbon/bourbon'</p> 
</article> 

<aside> 
    <!--<img src="style/images/cupman.gif" alt="It's bidness time">--> 
    <p>It's bidness time</p> 
</aside> 

그리고 내 SASS는 다음과 같습니다 : 읽기`

$visual_grid: true 
$visual-grid-color: blue 
$visual-grid-index: front 
$visual-grid-opacity: 0.1 

@import 'bourbon/bourbon' 
@import 'neat/neat' 

@import 'variables' 



/////////////////////////// 
html 
    @include linear-gradient(black, gray) 
    height: 100% 

body 
    background-color: $baseColor 
    font-family: $type 


body * 
    -webkit-box-sizing: border-box 
    -moz-box-sizing: border-box  
    box-sizing: border-box   


////////////////////////////// 


.blog 
    @include outer-container 
    aside 
     @include span-columns(4) 
     background: $thirdColor 
     //height: 100% 
     //@include fill-parent() 
    article 
     @include span-columns(8) 
     background-color: $fourthColor 
     padding: 5px 
    margin-top: 40px 
    background-color: $secondColor 
` 

감사

여기 내 HTML입니다.

EDIT : 지금은 jQuery를 사용하여 수동으로 열 크기를 균등하게 조정할 예정이지만 더 자세한 정보가 필요하면 알려 주시기 바랍니다.

Answer 1

fill-parent는 컨테이너의 전체 높이가 아니라 전체 너비로 만 만듭니다. 그것은이 동등하다 : 동등 칼럼 높이

.element { 
    width: 100%; 
    // Also sets box-sizing if global $border-box-sizing is set to 'false' 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 

Source

Answer 2

한 용액 높이 모든 부모하고있다 : 100 %.

html, body 
    height: 100% 

.blog 
    @include outer-container 
    height: 100% 
    aside 
     @include span-columns(4) 
     background: $thirdColor 
     height: 100% 
    article 
     @include span-columns(8) 
     background-color: $fourthColor 
     padding: 5px 
     height:100% 

이 아이 부모의 높이를 설정하기 위해 먼저 필요의 높이를 제어하려면

Answer 3

작동합니다 :

귀하의 예제를 사용. 그런 다음 둘 다 동일한 높이로 만들려면 min-height 속성을 사용하십시오. 다음과 같은

:

.blog { 
    height: 100%; 
    aside { 
    min-height: 100%; 
    } 
}   

하고 작동합니다.