粘性页脚Probs（我看了）

所以，我尝试了一下，并进行了研究和观察，但显然我只是对CSS和HTML感到厌烦。所以，我恳求。我怎样才能让trafficCanvasContainer从导航栏的底部延伸到页脚的顶部？我试过将HTML/body设置为高度：100％，但是我总是在页脚的下面挂上额外的空格。截至目前，trafficCanvasContainer在内容结束处结束。粘性页脚Probs（我看了）

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

UPDATE： 这是我落得这样做来解决这个问题。它涉及一些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; 
};

来源

2016-01-22 AMB0027

好吧，我相信你应该#trafficCanvas有边距：0 ;财产和有页脚有margin-top：0px;属性。然后添加padding-top：10px;到你的页脚。

来源

2016-01-22 22:58:08 HTMLNoob

不起作用。谢谢 – AMB0027

检查this article。它在波兰，但代码简单易懂。

来源

2016-01-22 23:10:13 slick

这种方法不起作用，因为“换行”div落在页脚的下方，而不是停在页脚处。 – AMB0027

粘性页脚Probs（我看了）

回答

相关问题