引导3-所有页面的固定高度

Question

现在，当我加载一个不同的网页时，div会变小，而页脚的大小取决于div中的内容。

谁能帮我弄清楚为什么会这样。

我的代码(与使用水瓶略有不同)：

<!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 */
}

Answer 1

这是因为div容器没有固定的高度。如果您想使它成为固定高度，只需将其添加到您的文件中。

HTML:

改变这个

<div class="container">

至

<div class="container fixed-height">

CSS:

将此添加到css文件中

div.fixed-height {
height: 900px !important;
}

你可以把高度改为你想要的任何东西。另外，如果您只是试图将页脚保持在页面底部，我不建议这样做。如果你环顾互联网，还有其他方法可以做到这一点。