引导*垂直*响应

没有委托宽度管理，引导，我可以得到三个全高柱引导*垂直*响应

与下面的HTML/CSS。

<!DOCTYPE html> 
<head> 
    <style> 
     div { 
      position: fixed; 
      border: 5px dashed blue; 
      box-sizing: border-box; 
     } 
     .left { 
      height: 100%; top: 0; 
      width: 33%; left: 0; 
     } 
     .middle { 
      height: 100%; top: 0; 
      width: 33%; left: 33%; 
     } 
     .right { 
      height: 100%; top: 0; 
      width: 34%; left: 66%; 
     } 
     h2.text-center { 
      text-align: center; 
     } 
    </style> 
</head> 
<body> 
    <div class="left"> 
     <h2 class="text-center">Left</h2> 
    </div> 
    <div class="middle"> 
     <h2 class="text-center">Middle</h2> 
    </div> 
    <div class="right"> 
     <h2 class="text-center">Right</h2></div> 
    </div> 
</body>

为了让引导处理的宽度，我写

<!DOCTYPE html> 
<head> 
    <meta charset="UTF-8"> 
    <link rel="stylesheet" 
     href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/> 
    <style> 
     body { 
      min-height: 100%; 
      border: 3px solid green; 
     } 
     .fullheight { 
      min-height: 100%; 
      border: 3px solid blue; 
      /* position: absolute; */ 
     } 

    </style> 
</head> 
<body> 
    <div class="container-fluid fullheight"> 
     <div class="row fullheight"> 
      <div class="col-xs-4 col-md-4"> 
       <h2 class="text-center">Left</h2> 
      </div> 
      <div class="col-xs-4 col-md-4"> 
       <h2 class="text-center">Middle</h2> 
      </div> 
      <div class="col-xs-4 col-md-4"> 
       <h2 class="text-center">Right</h2> 
      </div> 
     </div> 
    </div> 
</body>

Switching position to absolute不结合引导，与其余的先前讨论，在这个问题上的工作（1，2，3，4）做没有帮助。

当宽度由Bootstrap管理时，如何将高度设置为100％？

如果有一种Bootstrap方法将DIV设置为100％高度，那会更好。

来源

2016-08-30 Calaf

简单地套用一个'最小height'到白手起家类具有'100％' – Roberrrt

撇开意见基础的性质这个问题 - http://stackoverflow.com/questions/19695784/how-can-i-make-bootstrap-columns-all-the-same-height –

@Roberrrt上面第二个代码中的'.fullheight'类已经做了这个。你能详细说明你的意思吗？ – Calaf

当宽度由Bootstrap管理时，如何将高度设置为100％？

我要引用我的朋友詹姆斯这一个：

有一个叫几个较新的CSS3计量单位：

视口百分比（或视相对）长度。

https://stackoverflow.com/a/16837667/3305454

做这些 '视' 单位呢？

在通常情况下，100％是相对于父元素，100vh或100vw不尊重其初始父母，但完全关注用户视口，这是他们的确切屏幕。一个例子（也由詹姆斯被盗）：

<body style="height:100%"> 
    <div style="height:200px"> 
     <p style="height:100%; display:block;">Hello, world!</p> 
    </div> 
</body>

这里的p标签设置为100％的高度，但由于其含有div有200像素高度，200像素100％变为200像素，的不是100％身高。相反，使用100vh意味着无论div高度如何，p标签都是身体高度的100％。

您的解决方案将应用该CSS规则的元素：

.left, .middle, .right { 
    min-height: 100vh; 
}

来源

2016-09-06 07:45:18 Roberrrt

非常好，但并不完美。如果您将3px替换为20px的边框厚度，则会看到框架从底部突出。他们如何才能在底部正确嵌套（就像他们在顶部一样）？ – Calaf

calc（100vh - 40px）？ :) – Roberrrt

哦，这没有工作，无赖。但是：箱子尺寸：边框; – Roberrrt

引导垂直响应

回答

引导*垂直*响应

回答

相关问题

引导垂直响应