Установите все содержимое бутстрапа в видимой области

Question

Я пытаюсь создать приложение, отображающее изображения с камеры на странице. У меня есть одна страница, которая будет иметь два ряда из 3 камер с использованием 4 x 4 x 4 макета, и это прекрасно работает, поскольку большинство экранов подходят для обоих рядов камер. Однако, когда я добавляю еще одну или две строки, я сталкиваюсь с проблемой, когда я не могу разместить весь контент на одной странице, поэтому для просмотра содержимого всегда требуется прокрутка на меньшем мониторе. Очевидно, что по умолчанию мой контент уменьшается, когда я уменьшаю размер окна, но я ищу способ сделать это автоматически всякий раз, когда загружается моя страница.

Я пробовал делать <div class="container" style="height: 75%; max-height: 80%">, однако это, кажется, не влияет на высоту вообще.

С точки зрения расположения, вот мой первый ряд камер:

<div class="container" style="height: 75%; max-height: 80%"> 
    <div class="row"> 

      <div class="row"> 
       <div class="col-md-4"> 
        <asp:Image ID="Image1" runat="server" Height="100%" Width="100%" /> 
       </div> 
       <div class="col-md-4"> 
        <asp:Image ID="Image2" runat="server" Height="100%" Width="100%" /> 
       </div> 
       <div class="col-md-4"> 
        <asp:Image ID="Image3" runat="server" Height="100%" Width="100%" /> 
       </div> 
      </div> 

Я попытался установки <div class="container" style="height: 500px;">, чтобы увидеть, если он будет вручную установить высоту - который не работал. Я использую Bootstrap 3.3.6

Answer 1

Процент высоты требует, чтобы высота была установлена ​​на родительском элементе, иначе она не будет делать то, что вы думаете, что она должна делать.

Из-за вышеуказанной причины установка высоты на .container не будет работать для ваших изображений с высотой и шириной, установленной на 100%.

У вас есть три элемента между элементом, который вы указали по высоте, и с помощью height: 100%;. Вам нужно либо:

1. Установить высоту на .col-md-4 или
2. ли каждый элемент между .container и вашим изображением имеет height: 100%; набор на них. Таким образом, высота, установленная на .container, будет «достичь» изображение.

Что у вас сейчас

<div class="container" style="height: 75%; max-height: 80%"> 
    <div class="row"><!-- No height set --> 
     <div class="row"><!-- No height set --> 
      <div class="col-md-4"><!-- No height set --> 
       <!-- Percentage height doesn't work here as parent doesn't have a height explicitly set. --> 
       <asp:Image ID="Image1" runat="server" Height="100%" Width="100%" /> 
     </div> 
    </div> 
</div> 

Вариант 1

.col-camera { 
    height: 150px; 
} 

<div class="container" style="height: 75%; max-height: 80%"> 
    <div class="row"><!-- No height set --> 
     <div class="row"><!-- No height set --> 
      <div class="col-camera col-md-4"><!-- Height set (via CSS, 150px) --> 
       <!-- Percentage height will work here as parent does have a height explicitly set. --> 
       <asp:Image ID="Image1" runat="server" Height="100%" Width="100%" /> 
     </div> 
    </div> 
</div> 

Вариант 2

Этот вариант предполагает, что .container способен взять 75% своего родителя, поскольку родительский элемент имеет установленную высоту.

.container { 
    height: 75%; 
    max-height: 85%; 
} 
.container .row, 
.container .col-md-4 { 
    height: 100%; 
} 

<div class="container"> 
    <div class="row"><!-- Height set (via CSS, 100%) --> 
     <div class="row"><!-- Height set (via CSS, 100%) --> 
      <div class="col-md-4"><!-- Height set (via CSS, 100%) --> 
       <!-- Percentage height will work here as parent does have a height explicitly set. --> 
       <asp:Image ID="Image1" runat="server" Height="100%" Width="100%" /> 
     </div> 
    </div> 
</div> 

Я уверен, что есть и другие решения, но помните, если вы работаете с процентных высот вы должны установить высоту на родительский элемент. Если высота этого родительского элемента также является процентом, то для него потребуется высота, установленная на родителя и т. Д. И т. Д.

Вы можете изучить viewport units, если они соответствуют вашим уровням поддержки.