Question

我正在尝试使用Bootstrap 3制作单页全屏布局，其中主体的高度是响应的。

该页面将以Kiosk模式显示，显示3个显示不同消息的面板，但由于该网站将在不同大小的多个屏幕上显示，我希望主要在高度响应。

<div class="container">

  <div class="row header">
    <div class="col-xs-6">
      Title
    </div>
    <div class="col-xs-6 text-right">
      LOGO
    </div>
  </div><!-- Header-->

  <div class="row main">
    <div class="col-xs-8">
      <div class="well">Panel One</div>
    </div>

    <div class="col-xs-4">
      <div class="well">Panel Two</div>    
      <div class="well">Panel Three</div>
    </div>
  </div><!--main-->

  <div class="row footer">
    <div class="col-xs-12">&copy; Copyright 2016</div>  
  </div><!--footer-->

</div><!--container-->

正如您所看到的，我必须指定主要内容的高度以使cols为100％，然后是列中的.wells。但我希望这是100％。

Answer 1

您可以使用vw值进行水平和垂直调整大小。 For example

HTML

<div class="main">
<div class="well">
Panel one
</div>
</div>

CSS

.main {
   border: 1px solid red;
   height: 75vw;
}

.well {
   width: 30vw;
   height: 30vw;
   margin: 1vw;
}

从px转换为vw很容易。每1 vw是10像素。

Answer 2

感谢你对vw的帮助......我已经设法用vh达到了这个目的......

我已经为希望将来使用此功能的人创建了一个示例 - here

使用相同的布局

 <div class="container-fluid">
        <div class="row">
            <div class="col-sm-12">
                <div class="well">Header</div>
            </div>
        </div>

        <!-- main -->
        <div class="row">
            <div class="col-xs-8 main">
                <div class="well">
                    Main Panel
                </div>
            </div>

            <div class="col-xs-4 side-bar">
                <div class="well">
                  Side Panel One
                </div>

                <div class="well">
                 Side Panel One
                </div>
            </div>

        </div>

        <!-- Footer-->
         <div class="row">
            <div class="col-sm-12">
                <div class="well">Hello</div>
            </div>
        </div>
    </div>

你只需要高高兴兴地将它带到适合你的屏幕尺寸。

Bootstrap单页全屏布局响应高度

2 个答案: