Bootstrap row изготовленный под заказ высота в процентах

Я развиваю маленький веб-сайт, и я сталкиваюсь с некоторыми проблемами.Bootstrap row изготовленный под заказ высота в процентах

То, что я хочу, это изменить размер «строки» с определенной высотой в процентах. Я уже искал SO, но ничего не было хорошо для меня. Вот мой код:

<body> 
    <nav class="navbar navbar-inverse navbar-static-top"> 
     ... 
    </nav> 
    <!-- END NAVBAR --> 
    <div class="container-fluid"> 
     <div class="row row-first"> 
      <img class="img img-responsive" src="public/img/bg.jpg" /> 
     </div> 
    </div>

класса «строка-первый» сейчас не имеет никаких правил, так что не вступила в силу. Я хочу, чтобы div «row-first» составлял 80% высоты видового экрана, но единственный способ изменить его размер - это разместить некоторый контент внутри div, чтобы высота div соответствовала высоте содержимого. мой CSS:

html { 
    height: 100%; 
} 

body { 
    height: 100%; 
} 

body { 
    font-family: 'Muli', sans-serif; 
} 

.container-fluid { 
    max-height: 100%; 
    padding-left: 0px; 
    padding-right: 0px; 
} 

.row { 
    margin-left: 0px; 
    margin-right: 0px; 
    height:80%; 
} 

.row-first { 

}

источник

2015-09-14 panc_fab

Высота DIV является относительно высоты родителя. Поэтому, чтобы сделать высоту .row 80%, я сначала установил высоту родителя. Вот CSS:

.container-fluid { 
    height: 100%; 
    padding-left: 0px; 
    padding-right: 0px; 
} 

.row-first { 
    height:80%; 
    overflow: hidden; 
}

И скрипку: http://jsfiddle.net/bmwoLkdr/

Не стесняйтесь играть с высоты и убедитесь сами!

источник

2015-09-14 20:48:06 pgruber

Hi pgruber, спасибо за ответ, но моя проблема в том, что я хочу 80% экрана просмотра, то есть 80% видимой высоты браузера. Используя ваш подход, я могу правильно изменить высоту, но правило .container-fluid (высота: 100%) позволяет жидкости в контейнере выходить за пределы высоты просмотра (т. Е. Появляется полоса прокрутки). –

Не можете ли вы определить субконтейнер '.container-fluid' и установить' height: 80%; 'как в его примере? – UltraSonja

Bootstrap row изготовленный под заказ высота в процентах

ответ

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