2 колонки, одна с минимальной шириной и высотой 100%

Question

У меня есть обертка, основные и в стороне элементы внутри.

Я хочу иметь:

• обертки - не фиксированную высоту, простираясь до высоты запрещенного контента - более длинного столбец 2.
• в стороне - левый столбец, ширина 30%, мин-ширина: 340px (с заполнением), высота 100% обертки.
• главный - правый колонка, ширина авто.

Когда я устанавливаю обертку в положение: относительное и в сторону положения: абсолютная высота 100% работает, однако это разрушает ширину основного элемента. Есть ли другой способ добиться того, что мне нужно только с CSS/SASS, и не «хакировать» со скрытыми div и т. Д.

.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

Есть несколько способов достижения этой цели. Вероятно, проще всего сделать элементы отображения как таблица:

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

Answer 2

Присвоить некоторую высоту для родительского DIV, например height:209px; вашего .wrapper

DEMO

You также можете использовать min-height: value к вашим main и aside

Answer 3

Вам нужно добавить margin-left к main, что равна ширине aside:

main { 
    margin-left: 340px; 
} 

Вы можете быть заинтересованы в создании контрольных точек для мин-ширина/ширина значения, хотя. Для экранов с размером экрана больше 1033 пикселей ширина aside составит 30%, поэтому ваш margin-left должен составлять 30%.

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

Fiddle: http://jsfiddle.net/2m503b8e/5/