2列，最小寬度和100％高度

-1

我有一個包裝，主要和旁邊元素裏面。2列，最小寬度和100％高度

我想有：

包裝 - 沒有固定的高度，延伸到內容的高度 - 的2
較長柱預留 - 左欄，寬度30％，最小寬度： 340px（填充），高度100％的包裝。
main - 右欄，寬度自動。

當我設置包裝位置：相對和位置：絕對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/

來源

2014-08-28 user2656313

'高度：繼承;'？ – Benjamin 2014-08-28 13:47:33

不，不工作。 – user2656313 2014-08-28 13:50:12

你能把小提琴嗎？ – Riskbreaker 2014-08-28 13:50:49

-1

有實現這一目標的幾種方法。也許最簡單的是使元素顯示一個類似的表：

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

來源

2014-08-28 14:00:34 Moob

我不反對票反對，但請解釋爲什麼給票？這不符合OP的要求？ – Moob 2014-08-28 14:04:13

是的，它是令人費解的downvotes。我認爲你的解決方案將工作，謝謝。 – user2656313 2014-08-28 14:32:20

指定一些高度你的父母DIV例如height:209px;您.wrapper

DEMO

你也可以使用min-height: value到您的main和aside

來源

2014-08-28 14:00:44 Benjamin

您需要添加一個margin-left到main，這等於aside寬度：

main { 
    margin-left: 340px; 
}

您可能會感興趣的最小寬度創建斷點雖然/寬度值。對於視口尺寸大於1033px的屏幕，aside的寬度將變爲30％，因此您的margin-left需要爲30％。

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

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

來源

2014-08-28 14:02:10 denisol

2列，最小寬度和100％高度

回答

相關問題