4

私は Bourbon Neat をテストしており、外側のコンテナー内に 2 つの列があり、列の高さを同じにしたい (最も高い列と同じ高さ)。短い列で @include fill-parent を使用しても機能しません。外側のコンテナーと同じ幅になるだけです。私はjavascriptでそれを行うことができましたが、Neatはこれを処理しませんか?

これが私の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>

そして、これが私の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
`

そして、これが問題を説明する写真です。 読んでくれてありがとう。

編集: 今のところ、jQuery を使用して列のサイズを手動で均等化していますが、これについてより適切な方法 (笑) があるかどうか教えてください。

4

3 に答える 3

0

列の高さを等しくする 1 つの解決策は、すべての親を height: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%

これはうまくいくはずです

于 2014-10-13T06:45:47.767 に答える
0

子の高さを制御するには、まず親の高さを設定する必要があります。次に、両方を同じ高さにしたい場合は、min-height プロパティを使用します。

次のように:

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

そしてそれはうまくいくはずです。

于 2014-11-19T11:52:16.533 に答える