twitter-bootstrap Bootstrap Div 高度随内容大小而变化
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14885484/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap Div height keeps going by content size
提问by Mister R2
I'm trying to make a website with Twitter Bootstrap, that is basically a single, vertically centered column on top of a background container div (so I can color / image the background on the edges).
我正在尝试使用 Twitter Bootstrap 创建一个网站，这基本上是一个位于背景容器 div 顶部的垂直居中的单个列（因此我可以为边缘的背景着色/成像）。
I keep having this issue where I can get the background div to fill the enter screen, but the centered column div sets its height to the size of the content. I want it to always, at least, be as tall as the screen size. I thought min-height would do this, but it does not.
我一直遇到这个问题，我可以让背景 div 填充输入屏幕，但居中的列 div 将其高度设置为内容的大小。我希望它至少与屏幕尺寸一样高。我认为 min-height 会这样做，但事实并非如此。
Here's what it looks like right now: (it's just a test page for the layout)
这是它现在的样子：（它只是布局的测试页）
Here is the code for it:
这是它的代码：
HTML
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Baileysaurus -- Dinosaurs && Logic in your face!</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet">
<LINK href="header.css" rel="stylesheet" type="text/css">
<LINK href="forum.css" rel="stylesheet" type="text/css">
<!-- jQuery (Bootstrap requires jQuery!) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<!-- Bootstrap -->
<LINK href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"
media="screen">
<!-- A file of PHP utility functions -->
<?php
include 'functions.php';
?>
</head>
<body>
<!-- Bootstrap -->
<script src="bootstrap/js/bootstrap.min.js"></script>
<div id='background' class='row-fluid'>
<div class='span12'>
<div id='site-column' class='row-fluid span10 offset1 column-wrap'>
<img src="/PipeDog.jpg" alt="ARGUMENT INVALID" />
<hr>
<p>
Put a blog here!
</p>
</div> <!-- END of outermost span12 div -->
</div> <!-- END - "site-column" div -->
</div> <!-- END - "background" div -->
</body>
</html>
CSS
CSS
html, body
{
height: 100%;
margin: 0;
}
#background
{
position: absolute;
top:0;
bottom: 0;
min-height: 100%;
min-width: 100%;
background-color: Gainsboro;
}
#site-column
{
top: 0;
bottom: 0;
min-height: 100%;
border-left: 2px solid;
border-right: 2px solid;
background-color: white;
}
.column-wrap
{
overflow: hidden;
}
I'm trying to get the white column in that photo to stretch to the bottom of the screen, at least, even if the content is not that long. Anyone have any ideas on what I'm missing?
我试图让那张照片中的白色列伸展到屏幕底部，至少，即使内容不那么长。有人对我缺少的东西有任何想法吗？
采纳答案by OliverP
You should also be able to add the following CSS:
您还应该能够添加以下 CSS：
.span12 {
height:100%;
}
回答by marvin
Try to make your outer <div>to extend to the bottom of the page.
尽量让你的外层<div>延伸到页面底部。
So try this in the css:
所以在css中试试这个：
.row-fluid
{
position:absolute;
bottom:0;
}
And I'm not sure but you may have to move your
我不确定但你可能不得不移动你的
<script src="bootstrap/js/bootstrap.min.js"></script>
line to the <head>part of your page.
行到<head>页面的一部分。
