Question

所以，我已经尝试过，研究过，看过，但显然我对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>

更新这就是我最终解决这个问题的方法。它涉及一些javascript。

的index.html

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

<canvas id="trafficCanvas" height="500" width="940"></canvas>

<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>

index.css

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;
}

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;
};

Answer 1

好的，我相信你应该让#trafficCanvas有一个底边：0;属性并且页脚有margin-top：0px;属性。然后添加padding-top：10px;到你的页脚。

Sticky Footer Probs（我看过）

1 个答案: