Html 使引导列接触div的底部_Html_Css_Twitter Bootstrap

Html 使引导列接触div的底部

html css twitter-bootstrap

Html 使引导列接触div的底部,html,css,twitter-bootstrap,Html,Css,Twitter Bootstrap,我不知道如何做到这一点，基本上我希望当所述div的最小高度为100%时，列从div的顶部接触到div的底部。但这不起作用： html, body { height: 100%; } body { max-width: 1500px; margin: 0 auto; } #wrapper { min-height: 100%; overflow: auto; } .container { min-height: 100%; overflow: auto; } .

我不知道如何做到这一点，基本上我希望当所述div的

最小高度为100%时，列从div的顶部接触到div的底部。但这不起作用：
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没有。它仅扩展到中包含的内容的末尾
<!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%。。。为什么？你错过了一个。您应该使用height
而不是minheight

（）
您需要将最小高度添加到所有图元（父图元）。在这种情况下，您缺少行元素。
如果包含位置：绝对就可以了。但是使用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> 

要使此显示符合您的需要或预期，似乎需要包含html
和正文。
我希望这是
我只使用高度：100vh而非<代码>高度：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;  
} 

可能重复的
.container .row .col-md-6 {
  position: absolute;  
  height: 100%;
  overflow: auto;  
} 

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;  
}