Сделать плавающий div развернуть до высоты страницы

У меня есть две колонки, одна с гибкой шириной и одна, которая должна расширяться до оставшейся ширины. я это настроить так:Сделать плавающий div развернуть до высоты страницы

.container { 
    height: auto; 
    overflow: hidden; 
} 

.right { 
    width: 80px; 
    float: right; 
    background: #aafed6; 
    position:relative; /* Needed for positioning an element absolutely inside this dib */ 
} 

.left { 
    float: none; /* not needed, just for clarification */ 
    background: #e8f6fe; 
    /* the next props are meant to keep this block independent from the other floated one */ 
    width: auto; 
    overflow: hidden; 
}

Вот скрипка: http://jsfiddle.net/dms53yt8/

Моей проблема, я хочу право ДИВ иметь равную высоту, как и левые дела. Как я могу это сделать, сохраняя при этом существующую структуру?

Спасибо! Uri

источник

2014-11-05 Uri Klar

http://stackoverflow.com/questions/1205159/html-css-making-two-floating-divs-the-same-height ♦ HTTP: // StackOverflow. com/questions/2114757/css-equal-height-columns ♦ http://stackoverflow.com/questions/14763363/how-to-create-equal-height-columns-in-pure-css И я уверен, что вы найти другие подобные вопросы по SO. –

Как об использовании display: table для контейнера DIV & display: table-cell для детей дивы?

Вот отредактированный jsfiddle - http://jsfiddle.net/dms53yt8/4/

источник

2014-11-05 09:50:20

Блестящий! Как я об этом не думал. Огромное спасибо. –

Это решение работает http://jsfiddle.net/ru02qxLx/

CSS дополнения

Добавить position: relative; в свой .container класса. Затем добавить position: absolute;, top:0;, bottom:0; и right:0; к вашему .right класса

.container { 
    height: auto; 
    overflow: hidden; 

    /* Added */ 
    position:relative; 
} 

.right { 
    width: 80px; 
    background: #aafed6; 

    /* Added */ 
    position:absolute; 
    top:0; 
    right:0; 
    bottom:0; 
}

источник

2014-11-05 09:48:24 Nunners

Вы можете добавить заполнение дна и краю дна к обоим дивы. проверьте скрипт.

.right{ 
    padding-bottom: 500em; 
     margin-bottom: -500em; 
} 

.left{ 
    padding-bottom: 500em; 
     margin-bottom: -500em; 
}

DEMO

источник

2014-11-05 09:48:40 Haris

Сделать плавающий div развернуть до высоты страницы

ответ

Смежные вопросы