Question

我有一个包装器，主要和旁边的元素。

我希望：

包装 - 没有固定高度，伸展到内容的高度 - 2的较长列。
旁边 - 左列，宽度30％，最小宽度：340px（带填充），高度100％的包装。
main - 右列，宽度自动。

当我将包装器设置为position：relative而位于position：absolute时，100％的高度正在工作，但是会破坏主元素的宽度。有没有其他方法可以实现我只需要CSS / SASS所需要的东西，而不是隐藏的div等“hackish”？

.wrapper{
    border:$contentborder;
    background: $contentgradient;
    border-radius:3px;
    text-align: center;
    margin: auto;
}
main{
    text-align: left;
    overflow-x: hidden;
}
aside{
    float: left;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 30%;
    min-width: 340px;
    padding: 20px;
    padding-left: 0;
    height: 100%;
    text-align: left;
}

http://jsfiddle.net/2m503b8e/

Answer 1

为您的父级div height:209px;指定一些高度到.wrapper

<强> DEMO

您还可以min-height: value使用main和aside

Answer 2

您需要将margin-left添加到main，其等于aside的宽度：

main {
    margin-left: 340px;
}

您可能有兴趣为最小宽度/宽度值创建断点。对于视口大小超过1033像素的屏幕，aside的宽度将变为30％，因此margin-left需要为30％。

@media screen and (min-width: 1033px) {
    main {
        margin-left:30%;
    }
}

小提琴： http://jsfiddle.net/2m503b8e/5/

Answer 3

有几种方法可以实现这一目标。可能最简单的方法是将元素显示为表格：

.wrapper{
    border:$contentborder;
    background: $contentgradient;
    border-radius:3px;
    text-align: center;
    margin: auto;
    background:gray;
    display:table; /* make this act as a table */
}
main{
    text-align: left;
    overflow-x: hidden;
    background: red;
    padding:2em;
    display:table-cell; /* make this act as a table cell */
}
aside{
    /*float: left; */
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 30%;
    min-width: 340px;
    padding: 20px;
    padding-left: 0;
    /* height: 100%; */
    text-align: left;
    background:orange;
    display:table-cell; /* make this act as a table cell */
}

http://jsfiddle.net/2m503b8e/3/

2列，一列最小宽度和100％高度

3 个答案: