100% высота с использованием системы сетки Bootstrap

У меня возникают проблемы с компоновкой страницы с использованием системы сетки Bootstrap. Мне просто нужен левый навигационный div, содержащий определенное количество ссылок, но nav должен заполнить остальную часть страницы вертикально до конца содержимого div справа. Использование 100% высоты, похоже, не работает в моем случае.100% высота с использованием системы сетки Bootstrap

<div class="row"> 
<div id="nav" class="col-xs-2 col-sm-2 col-md-2 col-lg-2"> 
    <ul> 
     <li>Link</li> 
     <li>Link</li> 
     <li>Link</li> 
     <li>Link</li> 
     <li>Link</li> 
     <li>Link</li> 
    </ul> 
</div> 
<div id="main" class="col-xs-10 col-sm-10 col-md-10 col-lg-10"> 
    <h1>Header</h1> 
    <p>content</p> 
    <p>content</p> 
    <p>content</p> 
    <p>content</p> 
    <p>content</p> 
    <p>content</p> 
</div>

#nav { 
    position: relative; 
    height: 100%; 
    background-color: green; 
} 

#main { 
    height: 100%; 
    background-color: yellow; 
}

Вот скрипку за то, что я работаю с: https://jsfiddle.net/jLh4vxf4/

Горизонтальное расположение прекрасно, я просто не могу получить мою СЧА вертикально конец с моим содержание. Спасибо за любую помощь.

источник

2015-08-13 noclist

Дубликат [? Как я могу сделать Bootstrap все столбцы той же высоте] (http://stackoverflow.com/questions/19695784/how-can-i-make-bootstrap-columns- all-the-same-height) –

Я думаю, что это не дубликат этого вопроса, так как он использует процентный рост, и этот вопрос не решает его проблему в этом случае. –

Он использует 100% -ную процентную высоту, которая точно такая же, как и у другого вопроса. например Как сделать меньшие столбцы расширять ширину самого длинного ... [его пример работает] (https://jsfiddle.net/jLh4vxf4/2/) –

высота 100% не будет уважать, если положение относительно.

попробовать

position: fixed;

источник

2015-08-13 15:40:35

Если положение зафиксировано, навигатор не будет прокручиваться, если он выходит за пределы размера экрана. – noclist

В зависимости от требований к совместимости браузера, вы можете использовать замечательный "дисплей: Flex;" на родительском контейнере («div.row» в этом случае) и удалите «height: 100%;» из обоих дочерних элементов (#nav и #main).

Это именно то, для чего предназначен flex.

Поддерживается в большинстве браузеров, но не в IE9 или ниже. Проверьте статистику проникновения в версию браузера, чтобы определить, стоит ли это того или нет. (Обычно я устанавливаю 2% отсечения - я бы предпочел, чтобы 98% моих посетителей имели отличный опыт, чем 100% имели посредственный опыт)

источник

2015-08-13 15:53:51

Вот измененная версия вашей скрипки: https://jsfiddle.net/frxpngcn/1/ –

Этот ответ работает, однако во многих случаях это не самый лучший вариант.

Я сделал #nav, чтобы стать абсолютным, и после того, как я вставил границу слева на основное содержимое, чтобы имитировать фон #nav.

ширина

*{box-sizing: border-box} 

.row {position: relative} 

#nav { 
    position: absolute; 
    left: 0; 
    background: transparent; 
    z-index: 1; 
    width: 16.67%; 
    overflow: hidden; 
} 



#main { 
    background-color: yellow; 
    border-left: 16.67vw solid green; 

}

16,67% делает макет еще быть жидким и при той же ширине вы использовали (2/12 от общей сетки). 16.67vw эквивалентно 16,67% окна просмотра, что в большинстве случаев не будет проблемой.

Он решает проблему, но, опять же, будьте осторожны, так как это может принести больше проблем, чем полезности. Преимущество в том, что вам не нужно будет использовать height: 100%.

JSFIDDLE: https://jsfiddle.net/jLh4vxf4/6/

источник

2015-08-13 16:13:06

'position: relative' на .row класс необходим. Я редактировал его на JSFiddle –

100% высота с использованием системы сетки Bootstrap

ответ

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