Html 粘脚问题（我已经看过了）_Html_Css_Twitter Bootstrap

Html 粘脚问题（我已经看过了）

html css twitter-bootstrap

Html 粘脚问题（我已经看过了）,html,css,twitter-bootstrap,Html,Css,Twitter Bootstrap,所以，我试了又试，研究了又看，但显然我对CSS和HTML很糟糕。所以，我求求你。我该如何让trafficCanvasContainer从导航栏底部延伸到页脚顶部？我曾尝试将html/body设置为高度：100%，但我总是在页脚下方挂上额外的空白。到目前为止，trafficCanvasContainer在其内容结束的地方结束 <!DOCTYPE html> <html class="no-js"> <head> <meta charset="u

所以，我试了又试，研究了又看，但显然我对CSS和HTML很糟糕。所以，我求求你。我该如何让trafficCanvasContainer从导航栏底部延伸到页脚顶部？我曾尝试将html/body设置为高度：100%，但我总是在页脚下方挂上额外的空白。到目前为止，trafficCanvasContainer在其内容结束的地方结束

<!DOCTYPE html>
<html class="no-js">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Overseer</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="css/core.css">

    <style>
      input:focus,
      select:focus,
      textarea:focus,
      button:focus {
        outline: none !important;
      }

      #allPosts {
        resize: none;
        font-size: 12px;
        border-radius: 5px;
        border: #ccc solid 1px;
        line-height: 14px;
        height:100px;
        overflow: scroll;
      }

      #trafficFeed {
        resize: none;
        font-size: 12px;
        border-radius: 5px;
        border: #ccc solid 1px;
        line-height: 14px;
        height:80%;
        overflow-y: auto;
        width: 100%;
        height: 100px;
      }

      #trafficCanvas {
        margin: 0 auto;
        display: block;
      }

      #trafficCanvasContainer {
        min-height: 100%;
        height: 100%;
        width:100%;
        display:block;
      }

      .fill {
        min-height: 100%;
        height: 100%;
        width: 100%;
      }

      .stop-button {
        margin: 5px;
      }

      .start-button {
        margin: 5px;
      }

      p{
        margin:0;
        padding:0;
      }

      /* Sticky footer style */
      html {
        position: relative;
        min-height: 100%;
      }

      body {
        /* Margin bottom by footer height */
        margin-bottom: 233px;
      }

      .footer {
        position: absolute;
        bottom: 0;
        width: 100%;
        /* Set the fixed height of the footer here */
        height: 233px;
      }
    </style>
  </head>

  <body>
    <!--[if lt IE 8]>
        <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
    <![endif]-->

    <div class="navbar navbar-inverse navbar-static-top">
      <div class="navbar-inner">
        <a class="brand" href="#" style="color: white;">Overseer</a>
      </div>
    </div>

    <div class="container fill">
      <div id="trafficCanvasContainer">
        Content Goes Here
      </div>
    </div>

    <footer class="footer">
      <div class="well" style="margin-bottom: 0px;">
        <h3>Traffic</h3>
        <div id="trafficFeed" class="form-control"></div>
        <div class="input-group">
          <span class="input-group-btn">
            <button id="stopCapture" type="button" class="btn btn-danger pull-right stop-button">Stop</button>
            <button id="startCapture" class="btn btn-success pull-right start-button" type="button">Start</button>
            <div class="clearfix"></div>
          </span>
        </div><!-- /input-group -->
      </div>
    </footer>
  </body>
</html>

index.js

function setupCanvas() {
  var self = this;

  self._canvas = document.getElementById("trafficCanvas");

  var navbarDimensions =
    document.getElementsByClassName("navbar")[0].getBoundingClientRect();
  var footerDimensions =
    document.getElementsByTagName("footer")[0].getBoundingClientRect();

  self._canvas.width = document.body.clientWidth;
  self._canvas.height = document.body.clientHeight
                        - footerDimensions.height
                        - navbarDimensions.height;
};

好的，我认为你应该让#trafficCanvas有一个利润底部：0；属性并使页脚具有页边距顶部：0px；财产。再加上垫面：10px；到你的页脚

html {
  position: relative;
  height: 100%;
  overflow: hidden;
}

body {
  /* Margin bottom by footer height */
  margin-bottom: 233px;
  height: 100%;
}

p{
  margin:0;
  padding:0;
}

.navbar {
  margin-bottom: 0px;
}

#trafficCanvas {
  margin: 0 auto;
  display: block;
}

#trafficFeed {
  resize: none;
  font-size: 12px;
  border-radius: 5px;
  border: #ccc solid 1px;
  line-height: 14px;
  height:80%;
  overflow-y: auto;
  width: 100%;
  height: 100px;
}

.start-button {
  margin: 5px;
}

.stop-button {
  margin: 5px;
}

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 233px;
}

function setupCanvas() {
  var self = this;

  self._canvas = document.getElementById("trafficCanvas");

  var navbarDimensions =
    document.getElementsByClassName("navbar")[0].getBoundingClientRect();
  var footerDimensions =
    document.getElementsByTagName("footer")[0].getBoundingClientRect();

  self._canvas.width = document.body.clientWidth;
  self._canvas.height = document.body.clientHeight
                        - footerDimensions.height
                        - navbarDimensions.height;
};