Question

我有一个相当简单的基于Bootstrap 3的布局，我希望主要元素（中央div）在浏览器窗口调整大小时垂直扩展或收缩以填充可用空间，但允许下面的几个元素因此，所有元素的高度都不会溢出窗口高度（从而导致滚动条出现）或下溢（从而浪费窗口中可见的垂直空间）。

最近我可以达到这个目的如下。问题是“.90-height”类（height: 90%）导致所有元素的总高度略微过低或略微过多，具体取决于垂直窗口大小。

CSS：

.full-height { height: 100%; }
.90-height { height: 90%; }
.doborder { border: 1px solid; border-color: #ddd; border-radius: 4px; }
.controlsdiv { display: table; width: 100%; }

HTML：

<html class="full-height">
   <body class="full-height">

      <div class="navbar navbar-fixed-top" style="min-height:20px !important;">

      <div class="container-fluid full-height">
         <div class="row 90-height">
            <div class="90-height"> <-- Main column -->
               <div class="doborder full-height">

                  <-- Content here -->

               </div>
               <div class="controlsdiv">
                  <-- Couple of controls in here -->
               </div>
            </div> <-- End main column -->
         </div> <-- End row -->

         <footer style="margin-top: 30px;">
            <span>Some text</span>
         </footer>

      </div> <-- End container -->

   </body>
</html>

唯一的问题是我根本无法简化这种结构 - 即删除任何元素，因为我需要它们来处理各种事情。

Answer 1

有几种不同的方式可以接近它。另请注意，CSS类名称不应以数字开头。您可以使用CSS calc()从主体中减去页脚的高度。您只需在主容器上使用height-90一次。

CSS calc（）演示 http://www.codeply.com/go/mbXpavYiV8

.height-90 { height:calc(100% - 50px); }

<div class="navbar navbar-default navbar-fixed-top">
    <div class="navbar-header"><a class="navbar-brand" href="#">Brand</a></div>
    <ul class="nav navbar-nav">
        <li><a href="#">Link</a></li>
    </ul>
</div>
<div class="container-fluid height-90 bg-info">
    <div class="row">
        <div class="">
        </div>
        <div class="controlsdiv">
        </div>
    </div>
</div>
<footer style="margin-top: 30px;">
    <span>Some text</span>
</footer>

另一个解决方案是使用flexbox ..

.full-height { display: flex; flex-direction: column; height: 100%; }
.fill-height { flex-grow: 1; width: 100%; }

Flexbox演示 http://www.codeply.com/go/tFUf5XFe29

使用Bootstrap 3布局保持一致的全高度垂直尺寸？

1 个答案: