Растянуть блок до самого низа

@nikjda · Регистрация: 29.09.2015

Author24 — интернет-сервис помощи студентам

Не могу растянуть блок до самого низа, красной полоской показано до куда нужно растянуть
Сам код:

CSS

.sidebar {
    width:26.6%;
    float:right;
    color:white;
    border-right: 3px solid #575757;
    border-left: 3px solid #575757;
    background: #cccccc;
}

@winner_ua · 16.11.2015, 22:23

Привожу пример как это сделать - http://fiddle.jshell.net/7hd36f9t/

HTML5

1
2
3

<div class="section"></div>
<div class="sidebar"></div>
<div class="clearfix"></div>

CSS

html, body {
    height: 100%; 
    margin: 0px; 
    padding: 0px; 
}
 
.section {
    width: calc(73.4% - 8px);
    border: 1px solid red;
    float: left;
    height: 100%;
}
 
.sidebar {
    width: 26.6%;
    float: right;
    color: white;
    border-right: 3px solid #575757;
    border-left: 3px solid #575757;
    background: #cccccc;
    height: 100%;
}
 
.clearfix {
    clear: both;
}

Если вам нужны пояснения по какому либо блоку или свойству из примера - задайте, объясню.

@nikjda · 16.11.2015, 23:03 **[ТС]**

Не помогло

@winner_ua · 16.11.2015, 23:21

nikjda, давайте полный код страницы либо в архиве, либо на http://fiddle.jshell.net, чтоб можно было определить, что не работает или из-за чего.

@Glart · 16.11.2015, 23:25

CSS

.sidebar {
    width:26.6%;
    float:right;
    color:white;
    border-right: 3px solid #575757;
    border-left: 3px solid #575757;
    background: #cccccc;
height:100%;
}

@nikjda · 19.11.2015, 00:15 **[ТС]**

Сообщение от Glart

height:100%;

Не помог

@winner_ua · 19.11.2015, 00:20

nikjda, height: 100% поможет в том случае, если родительские элементы будут иметь высоту 100% начиная с html и body, попробуйте. Обратите внимание на мой пример, в котором я указал высоту 100% для html и body, тогда и блок .sidebar с заданной высотой в 100% будет растягиваться.

@nikjda · 19.11.2015, 21:06 **[ТС]**

Установил height:100%; и в html и в body, все равно без изменений

@winner_ua · 19.11.2015, 21:10

nikjda, скиньте страницу в архиве (можно в личку), я продебажу и гляну почему у вас не растягивается.

@nikjda · 19.11.2015, 22:20 **[ТС]**

Сообщение от winner_ua

скиньте страницу в архиве (можно в личку), я продебажу и гляну почему у вас не растягивается.

Скинул в ЛС

@nikjda 0 / 0 / 0 Регистрация: 29.09.2015 Сообщений: 63
	16.11.2015, 23:03 [ТС]	3
	Не помогло 0

@winner_ua 10 / 10 / 6 Регистрация: 27.08.2015 Сообщений: 42
	16.11.2015, 23:21	4
	nikjda, давайте полный код страницы либо в архиве, либо на http://fiddle.jshell.net, чтоб можно было определить, что не работает или из-за чего. 0

@nikjda 0 / 0 / 0 Регистрация: 29.09.2015 Сообщений: 63
	19.11.2015, 00:15 [ТС]	6
	Сообщение от Glart height:100%; Не помог 0

@winner_ua 10 / 10 / 6 Регистрация: 27.08.2015 Сообщений: 42
	19.11.2015, 00:20	7
	nikjda, height: 100% поможет в том случае, если родительские элементы будут иметь высоту 100% начиная с html и body, попробуйте. Обратите внимание на мой пример, в котором я указал высоту 100% для html и body, тогда и блок .sidebar с заданной высотой в 100% будет растягиваться. 0

@nikjda 0 / 0 / 0 Регистрация: 29.09.2015 Сообщений: 63
	19.11.2015, 21:06 [ТС]	8
	Установил height:100%; и в html и в body, все равно без изменений 0

@winner_ua 10 / 10 / 6 Регистрация: 27.08.2015 Сообщений: 42
	19.11.2015, 21:10	9
	nikjda, скиньте страницу в архиве (можно в личку), я продебажу и гляну почему у вас не растягивается. 0

@nikjda 0 / 0 / 0 Регистрация: 29.09.2015 Сообщений: 63
	19.11.2015, 22:20 [ТС]	10
	Сообщение от winner_ua скиньте страницу в архиве (можно в личку), я продебажу и гляну почему у вас не растягивается. Скинул в ЛС 0

Опции темы