Divs not expand vertically with susy grids

StackOverflow https://stackoverflow.com/questions/21512313

  •  06-10-2022
  •  | 
  •  

Question

OK I've searched a lot but I am now out of options and not having a degree in Hogwarth cannot figure it out. First, I know it's common typographic problem when there are divs with content inside one main wrapper div and they don't want to expand to the height of parent container. I have minimal example that works here - white and yellow divs extend correctly with the main container (background green).

However...I am working currently on Jekyll 2-column template for my blogging page using Compass with Susy for grids. And things are going complicated.

my html:

<body>
<div id="root" role="mainwrapper" class="container">
    <div role="sidecontent" class="sidebar">
    nawigacja jakas
    <ul>
        <li>a</li>
        <li>b</li>
        <li>c</li>
    </ul>
</div>

<div role="zawartosc" class="main">

cos cos cos cos
</div>
</div>
</body>

and my computed style.css

Susy grid setting as follow:

$legacy-support-for-ie6 : false;
$legacy-support-for-ie7 : false;

// Podstawowa typografia
$total-columns: 12;
$gutter-width: 1em;
$column-widht: 5em;
$grid-padding: $gutter-width;

$development:true; 
$border-box-sizing:true;
$max-width: 1200px;

@import "susy";


[class^="container"]  {
    @include container;
    overflow:hidden;
    @include susy-grid-background;
    @include box-sizing(border-box);
}
[class^="sidebar"]{
    @include span-columns(3,12);
    min-height:100%;
    @include box-sizing(border-box);
}
[class^="main"]{
    @include span-columns(9 omega,12);
    min-height:100%;
    @include box-sizing(border-box);
}

I know I am definitely missing something here but none of my friends was able to help me :(

Was it helpful?

Solution

Getting 100% height in CSS can be very tricky and unreliable, but I think I tracked down the actual difference between your two examples (it isn't Compass or Susy). The sample that doesn't work is missing height: 100%; settings on the html, body, and container elements. Add that, and it will work.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top