Bootstrap Div height随内容大小而变化
Bootstrap Div height随内容大小而变化
提问于 2013-02-15 06:47:21
我正在尝试用Twitter Bootstrap做一个网站，它基本上是一个单独的，垂直居中的列，位于背景容器div的顶部(这样我就可以对边缘的背景进行着色/图像处理)。
我一直有这个问题，我可以让背景div填充enter屏幕，但居中的列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;
}我试图让那张照片中的白色列至少延伸到屏幕的底部，即使内容不是那么长。有人知道我错过了什么吗？
回答 2
Stack Overflow用户
回答已采纳
发布于 2013-02-15 07:04:49
您还应该能够添加以下CSS：
.span12 {
height:100%;
}Stack Overflow用户
发布于 2013-02-15 06:54:36
尝试让你的外部<div>延伸到页面的底部。
所以在css中试试这个：
.row-fluid
{
position:absolute;
bottom:0;
}我不确定，但你可能得把你的
<script src="bootstrap/js/bootstrap.min.js"></script>行到页面的<head>部分。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/14885484
复制相关文章
相似问题
腾讯云开发者
