Загрузочный лоток - заполнение оставшегося вертикального пространства

Я пытаюсь создать этот макет с помощью бутстрапа. Я помещаю логотип и навигатор, но теперь мне нужно вставить оставшийся div.
Мне нужно расширить этот div (с вопросительным знаком) на оставшееся пространство страницы (с краем, как на картинке).
Я не знаю, что такое логотип или процент процентного содержания на панели.

enter image description here

EDIT: POST MY CODE (исходная страница Yii Framework)

 <a href="index.html"><img width="150" src="images/logo.png"/></a>
 <nav class="navbar navbar-default">
 <div class="container-fluid">
    <div class="navbar-header">
        <button class="navbar-toggle btn btn-default" data-toggle="collapse" data-target="#yii_booster_collapse_yw0" id="yw1" name="yt0" type="button">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button></div>
        <div class="collapse navbar-collapse" id="yii_booster_collapse_yw0">
            <ul id="yw2" class="nav navbar-nav">
                <li class="active">
                    <a href="index.php/site/home">Home</a>
                </li>
            </ul>
            <ul class="pull-right nav navbar-nav" id="yw3">
                <li>
                    <a href="index.php/user/profile/edit">Profile</a>
                </li>
                <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="index.php/site/home">Options <span class="caret"></span>
                    </a>
                    <ul id="yw4" class="dropdown-menu">
                        <li>
                            <a tabindex="-1" href="index.php/site/contact">Contact Us</a>
                        </li>
                        <li>
                            <a tabindex="-1" href="index.php/user/profile/changepassword">Change password</a>
                        </li>
                    </ul>
            </ul>
        </div>
    </div>
   </div>
 </nav>
 <div id="content">
     fill vertical space
 </div>

Мне нужно заполнить оставшееся пространство, а не проблему с логотипом/брендом.

Ответы

Ответ 1

В css вы увидите, что я использовал calc() в значении height для вычитания.

Сначала получите высоту экрана просмотра размера экрана устройства, используя 100vh, затем вычтите высоту, которая используется над div, которую вы хотите заполнить, чтобы занять остальную часть экрана.

Вот Fiddle.

Помогает ли это?

PS: Я прокомментировал ваш навигационный код, где у вас есть дополнительный div и где я добавил </li>.

.block {
  height: -webkit-calc(100vh - 72px);
  height: -moz-calc(100vh - 72px);
  height: calc(100vh - 72px);
  background-color: rgba(90,90,190,0.8);
}