我正在尝试使用 Twitter Bootstrap 制作一个网站，它基本上是背景容器 div 顶部的一个垂直居中的单一列(这样我就可以对边缘的背景进行着色/图像化)。
我一直遇到这个问题，我可以让背景 div 填充输入屏幕，但居中的列 div 将其高度设置为内容的大小。我希望它至少始终与屏幕尺寸一样高。我以为 min-height 可以做到这一点，但事实并非如此。
这是现在的样子:(这只是布局的测试页)
这是它的代码:
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
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;
}
我试图让照片中的白色柱子至少延伸到屏幕底部，即使内容没有那么长。 有人对我缺少的东西有什么想法吗？
最佳答案
您还应该能够添加以下 CSS:
.span12 {
height:100%;
}
关于css - Bootstrap Div 高度随内容大小变化，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14885484/