Question

好的我已经搜索了很多，但我现在没有选择，没有Hogwarth的学位也无法理解。首先，我知道这是常见的排版问题，当一个主包装div内有div内容，并且他们不想扩展到父容器的高度。我有一个最小的例子here - 白色和黄色的div正确扩展主容器（背景为绿色）。

但是......我目前正在使用Compass和Susy进行网格的Jekyll 2列模板上的博客页面。事情变得复杂了。

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

和我的计算style.css

Susy网格设置如下：

$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);
}

我知道我肯定在这里遗漏了一些东西，但我的朋友都没有能够帮助我:(

Answer 1

在CSS中获得100%高度可能非常棘手且不可靠，但我认为我追踪了两个示例之间的实际差异（它不是Compass或Susy）。无法使用的示例缺少height: 100%;，html和body元素上的container设置。添加它，它将起作用。

Div不会与susy网格垂直扩展

1 个答案: