Bourbon Neat: How to expand column to match outer-container?

Question

I'm testing out Bourbon Neat, and I have two columns within an outer-container, and I want the columns to be equal height (so as tall as the tallest column). Using @include fill-parent on the short column doesn't work, it just makes it as wide as the outer-container. I could do it in javascript, but doesn't Neat handle this?

Here's my html:

<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>

And here's my 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
`

And here's a picture illustrating the problem. Thanks for reading.

EDIT: For now, I'm just using jQuery to manually equalize column size, but let me know if there's a Neater way (haha) to go about this.

Yeah, I think the only way that you're gonna get the result you want is to use jQuery. I know I was trying to do the same thing and I ended up using a jQuery add-on. — ultraloveninja, Jul 23 '14 at 16:07

score 0 · Answer 1 · answered Oct 13 '14 at 06:45

One solution to equal column height is making all parents to height:100%.

Using your example:

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%

This should work

score 0 · Answer 2 · answered Nov 19 '14 at 11:52

To control the height of a child you first need to set its parent's height. Then if you want to have both with the same height, just use the min-height property.

Like the following:

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

and it should work.

score -2 · Answer 3 · answered Jun 13 '14 at 18:27

fill-parent only makes it full width, not full height of its container. It is equivalent to this:

.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

Bourbon Neat: How to expand column to match outer-container?

3 Answers3