使引导列接触 div 的底部答案

【问题标题】：Make bootstrap column touch the bottom of the div使引导列接触 div 的底部
【发布时间】：2015-05-27 18:35:40
【问题描述】：

我不知道如何做到这一点，基本上我希望列从 div 顶部接触到 div 底部，当所述 div 的 min-height 为 100% 时。但这不起作用：

html, body {
  height: 100%;
}

body {
  max-width: 1500px;
  margin: 0 auto;
}

#wrapper {
  min-height: 100%;
  overflow: auto;
}

.container {
  min-height: 100%;
  overflow: auto;
}

.container .row .col-md-6 {
  min-height: 100%;
}

包装器延伸到页面底部，但容器 div 没有。它只延伸到 in 包含的内容的末尾。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title of the document</title>
</head>

<body>
    <div id="wrapper">
        <div class="container">
            <div class="row">
                <div class="col-md-6"></div>
                <div class="col-md-6"></div>
            </div>
        </div> 
    </div>
</body>
</html>

我有什么遗漏吗？正文和 html 达到 100%，包装器达到 100%，然后容器没有达到 100%……为什么？

【问题讨论】：

Bootstrap 3 - 100% height of custom div inside column 的可能重复项

标签： html css twitter-bootstrap

【解决方案1】：

你错过了一个。你应该使用height 而不是min-height

(Demo)

.row {
    height: 100%;
}

【讨论】：

【解决方案2】：

如果包含position:absolute; 就可以了。但是使用 absolute 会将第二个 div 放在第一个 div 的顶部。在您的示例中，您有两个并排的 div。这样做您还需要添加col-md-offset-6 以使两个 div 都清晰显示。

<div id="wrapper">
        <div class="container">
            <div class="row">
                <div class="col-md-6 bg-primary"></div>
                <div class="col-md-6 bg-info col-md-offset-6"></div>
            </div>
        </div> 
</div>

css 是……

.container .row .col-md-6 {
  position: absolute;  
  height: 100%;
  overflow: auto;  
}

【讨论】：

【解决方案3】：

要按照您的意愿或预期进行显示，您似乎需要包含html 和body。我希望这个 Fiddle will help。

我只使用height:100vh; 而不是height:100%;。

这有帮助吗？

html,body {
  height:100vh;  
  max-width: 1500px;
  margin: 0 auto;
  padding-top: 00px;  
}
/*
#wrapper {
  height: 100%;
  overflow: auto;
}
*/   
.container .row .col-md-6 { 
  height: 100vh;
  overflow: auto;  
}

【讨论】：

【解决方案4】：

您需要将最小高度添加到所有元素（父母）。在这种情况下，您缺少行元素。

【讨论】：