当我加载不同的网页时，div会变小，页脚会根据div中的内容而上升或下降。
有人可以帮我解释为什么会发生这种情况。
我的代码（与使用Flask略有不同）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>WBP Assignment</title>
<meta name="keywords" content="UEA, University, Coursework, York, Cottage, WBP, Web, Based, Programming">
<meta name="viewport" content="width=device-width, initial-scale=1.0"><!--mobile first :p -->
<meta name="description" content="UEA Undergraduate coursework assignment">
<meta name="author" content="Matthew Wilson, Pedro Bernardina">
<!--Bootstrap CSS-->
<link href="static/bootstrap.min.css" rel="stylesheet">
<link href="static/style.css" rel="stylesheet">
<!--Bootstrap Core JS-->
<script type="text/javascript" src="static/jquery.min.js"></script>
<script type="text/javascript" src="static/bootstrap.min.js"></script>
<script type="text/javascript" src="static/scripts.js"></script>
</head>
<body background="templates/background.jpg">
<div class="container">
<div class="row clearfix">
<div class="col-md-12 column">
<!-- A carousel inside the jumbotron, sliding data every 3000ms. -->
<div class="carousel slide" id="carousel-274384" data-interval="3000" data-ride="carousel"><!--carousel begin-->
<div class="carousel-inner">
<div class="item active"><!--begin item-->
<img alt="" src="static/img/1.JPG">
</div><!--end item-->
<div class="item"><!--begin item-->
<img alt="" src="static/img/2.JPG">
</div><!--end item-->
<div class="item">
<img alt="" src="static/img/3.JPG">
</div><!--end item-->
<div class="item">
<img alt="" src="static/img/4.JPG">
</div><!--end item-->
<div class="item">
<img alt="" src="static/img/5.JPG">
</div><!--end item-->
</div><!--end carousel inner-->
</div><!--end carouseul-->
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button> <a class="navbar-brand" href="/">York Cottage</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
<a href="/">Home</a>
</li>
<li>
<a href="/features">Features</a>
</li>
<li>
<a href="/gallery">Gallery</a>
</li>
<li>
<a href="/comments">Comments</a>
</li>
<li>
<a href="/contact">Contact</a>
</li>
</ul>
</div>
</nav>
<div class="row clearfix">
{% block content %}
<div class="content">
<div class="col-md-12 column" >
{% if pageType == "index" %}
<h3> {{ title }} </h3>
{% for p in paragraph %}
<p> {{ p }}</p>
{% endfor %}
<a href="http://www.southern-comfort.co.uk/" class="img-responsive" target="_blank"><img alt="" width="550" src="static/img/comfort.jpeg"></a>
{% endif %}
{% if pageType == "features" %} <!-- if vistor clicks features then index body disappears and features appears -->
<h3> {{ title }} </h3>
<ul>
<li>Living Room: Spacious open plan sitting room. Two sofas, 42" flat screen TV. DVD, Video, CD Player. </li>
<li>Kitchen/ Diner: Well equipped fitted kitchen with washing machine, dishwasher and microwave. Large dinning table with six chairs. </li>
<li>Bedroom 1: Double bed with an en-suite room. Fitted wardrobes.</li>
<li> Bedroom 2: Double bed with fiited wardrobes </li>
<li> Bedroom 3: Two twin beds with a fitted wardrobe</li>
<li> Bedroom 4: Single bed with two large fitted wardrobes</li>
<li> Upstairs Bathroom: Upstairs bathroom with bath</li>
<li> Downstairs Bathroom: Bathroom with power shower</li>
<li> Patio picnic bench overlooking heated swimming pool. Large front garden with driveway for three cars. </li>
</ul>
{% endif %}
</div>
{% endblock %}
</div>
</div>
<div class="col-md-1 column">
</div><!--right margin-->
<div class="row clearfix">
<div class="col-md-1 column">
</div><!--left margin-->
<div class="col-md-12 column" id="footer"><!--footer-->
<p>Matthew Wilson
<br/>Pedro Bernardina
<br/>Norwich Research Park, NR4 7TJ
<br/>University of East Anglia
<br/>All Rights Reserved
</p>
</div>
<div class="col-md-1 column">
</div><!--right margin-->
</div>
</div>
</div>
</div>
</body>
</html>
CSS：
.carousel-inner{
width:100%;
max-height: 28em !important;
}
.navbar-default {
background-color: #FFFFFF;
}
div#jumbotron {
margin-top: 2em;
}
div#map_canvas {
height:45em;
background-color: black;
}
div#main_cmt {
overflow: scroll;
background-color: white;
height: 50em;
margin-top: 2em;
}
ul#navbar {
background-color:white;
}
div#content {
background-color: white;
height: 50em;
margin-top: 2em;
}
div#extra {
background-color: white;
height: 50em;
margin-top: 2em;
text-align: justify;
}
div#footer {
background-color: #484848;
color: white;
padding: 1em;
margin-top: 2cm;
}
body {
background: url("..\FlaskApp\FlaskApp\templates\background.jpg");
}
/* resizes images in the website when screen is smaller */
img {
display: block;
height: auto;
max-width: 100%;
}
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
答案 0 :(得分：1)
这是因为div容器没有固定的高度。如果您想将其设置为固定高度，只需将其添加到文件
即可HTML：
更改此
<div class="container">
到
<div class="container fixed-height">
CSS：
将此添加到css文件
div.fixed-height {
height: 900px !important;
}
您可以将高度更改为您想要的任何高度。如果您只是试图将页脚保持在页面底部，我也不建议这样做。如果你环顾互联网，还有其他方法可以做到这一点。