Bootstrap 3 - Fixed height for all pages
Question
At the moment when I load up a different webpage the div gets smaller and the footer goes up or down dependent of what content it inside the div.
Can someone help me as to why this happening.
My Code (slightly different as using 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 */
}
1 answers
solution1
1 ACCPTED 2014-11-28 07:08:54
This is because the div container doesn't have a fixed height. If you want to make it a fixed height just add this to your files
HTML:
Change this
<div class="container">
to
<div class="container fixed-height">
CSS:
Add this to css file
div.fixed-height {
height: 900px !important;
}
You can change the height to whatever you want. Also I don't advise this if you are just trying to keep the footer to the bottom of the page. There are other ways to do that if you look around the internet.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
bootstrap 3 carousel fixed height
Fixed height columns with Bootstrap
How to let the <table> stay on fixed height? Bootstrap 4
Bootstrap - Fit caption text in thumbnails with fixed height
Fixed height for bootstrap pre-scrollable DIV
How to display different bootstrap pages with a bootstrap navigation bar fixed
fixed column row height for all rows
Select all checkboxes in all pages in the Bootstrap Table
Twitter Bootstrap sticky subnav becomes fixed before it should on shorter pages
Bootstrap: how to make scrollable list with fixed height in percents
Related Tags