在可视区域中安装所有引导程序内容

Question

我正在尝试创建在页面上显示相机图像的应用程序。我有一个页面，将有两排使用4 x 4 x 4布局的3台摄像机，并且工作良好，因为大多数屏幕都适合两排摄像机。但是，当我添加另外一两行时，我遇到了一个问题，即无法在同一页面上放置所有内容，它总是需要在较小的监视器上滚动以查看内容。显然，默认情况下，当我缩小窗口大小时，内容会缩小，但我正在寻找一种方法，可以在我的页面加载时自动执行此操作。

我试过做<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进行调查。