2

我正在为我正在设计的两个网站使用 Less Framework 4。在这两种设计中，我都想在文档的顶部和底部应用一个 5 像素的边框。

问题：由于应用于body的样式，我将边框底部和边框顶部应用于html对象，因此底部边框永远不会像通常的粘性页脚情况那样粘在页面底部.

以下是两种情况的屏幕截图：

我的重新设计

比利时客户

这是我用于 html 和 body 的 (LESS) CSS：pastie.org/private/us5x1vhjnwzq6zsiycnu2g

html {
    border-top: solid @black 10px;
    border-bottom: solid @black 10px;
    background: url('img/bg.png') repeat;
}

body {
    width: @8col;
    margin: 0px auto;
    padding: 100px 48px 84px;
    background: @white;
    color: rgb(60,60,60);
    -webkit-text-size-adjust: 100%; /* Stops Mobile Safari from auto-adjusting font-sizes */
    font: 13px/20px 'OftenRegular';
    -webkit-tap-highlight-color: @green;
}

我试过height: 100%同时使用body和html对象，但它看起来是这样的：http: //prikonline.be/prikactie/

我应该如何将边框粘贴到页面底部？

4

8 回答 8

2

您可以改为使用这样的页脚包装器。

.footer {
  position: absolute;
  bottom: 0;
  border-bottom: solid @black 10px;
  width: 100%;
}

并在之前</body>或之前插入这个

<div class="footer"></div>
于 2011-06-05T13:15:44.097 回答
1

无论您的滚动状态和内容高度如何，您都可以使用position:fixed;andbottom:0px;将其固定到底部。

于 2011-06-05T09:54:11.473 回答
1

尝试将其更改为：

height:auto;

为您的 HTML CSS。

于 2011-06-05T09:55:11.870 回答
1

嗯...在您的页面上放置min-height: 100%元素html（在 Web Inspector 中操作）立即在 Chrome 中为我工作；你在测试什么？

但是，由于边框的高度，这种方法确实会稍微超过box-sizing100%，您可以在 IE8+/Gecko/WebKit 中使用 CSS属性（使用 value border-box）进行更正。

对于 IE7 和 IE6，如果你想让它们呈现相同的效果，编写一个小 JavaScript 会很容易，在加载或调整大小时，检查窗口高度，与文档高度进行比较，并在必要时强制 HTML元素到窗口高度 - 20。

于 2011-06-05T13:39:09.187 回答
1

看起来您正在使用某种动态样式表工具（如 LESS）。通常动态样式表工具允许您使用 JavaScript。因此，您可以将高度定义为：

@height: `window.innerHeight + 'px'`;

然后添加类似

body{
  ...
  min-height: @height;
}

当然，这样做的问题是如果用户要调整他/她的浏览器窗口的大小，布局将不会适当地更新。您可以使用window.onresize回调来处理它。

当然，您可以使用 JavaScript 来处理整个事情。诚然，有些人强烈反对使用 JavaScript 进行样式设置（行为、内容和样式的分离），当尝试像粘性页脚这样的事情时，有时只写两行 JavaScript 比尝试想出一些聪明的东西更容易在您尝试定位的每个浏览器中可能会或可能不会工作的 CSS。如果用户关闭了 JavaScript，那么页面就不会在内容较少的页面上填满页面的整个高度。

window.onload = window.onresize = function(){ 
    document.body.style.minHeight = (window.innerHeight-204) + "px";
    // -4px for the border
    // -200px for the padding on your body element
}
于 2011-06-05T13:41:38.163 回答
1

我不建议您将 CSS 应用于 html 元素。而是创建具有相似样式的 div。在一般情况下，您的代码应该是这样的：

HTML

<div id="wrapper">
  <!-- main content goes here -->

  <div class="reserveSpace"></div>
</div><!-- #wrapper end -->

<div id="footer"></div>

CSS

* { margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; }
#wrapper { min-height: 100%; height: auto !important; height: 100%; }
#wrapper .reserveSpace { height: 100px; /* equals to footer height */ }
#footer { height: 100px; margin: -100px auto 0; background: #3CF; }

这适用于所有浏览器，即使在 IE6 中也是如此 :)

于 2011-06-05T13:50:33.477 回答
0

你总是可以实现这个有效的粘性页脚 CSS（我已经添加了内联社交栏）：

.sticky-bar {
    background: #000000;
    bottom: 0;
    color: #D3D3D3;
    font-weight: 300;
    left: 0;
    margin: 0;
    opacity: 0.9;
    padding: 0em;
    position: fixed;
    width: 100%;
    z-index:99999;}

.sticky-bar-inner {
    margin:0 auto;
    text-align: center;
    width:100%;
    background-color: #D3D3D3;
    padding: 3px;
    font-family: 'Roboto', sans-serif;
    font-size: 11px;
    color: #000000;
}

.sticky-bar-inner p {
    margin:0 auto;
    padding: 3px;
    text-align: center;
    width:100%;
    font-size: 11px;

}

#footerlist {
    padding-left:0;
}

#footerlist li {
    display: inline;
    list-style-type: none;
}

HTML：

<!-- Footer -->
<div class="sticky-bar">
    <div class="sticky-bar-inner">
        <p>&#169;2015 The astrobox.io Project<p>
        <ul id="footerlist">
            <li class="social"><a href="https://twitter.com/"><img src="#" height="42" width="42"></img></a></li>
            <li class="social"><a href="https://github.com/"><img src="#" height="42" width="42"></img></a></li>
            <li class="social"><a href="https://vimeo.com"><img src="#" height="42" width="42"></img></a></li>
        </ul>
    </div>
</div>

只需将 hrefs 编辑为您自己的个人 url，并将图像 src 编辑为您想要的社交风格图像（或者如果您有的话，包括 font awesome 包）。

于 2015-02-28T10:47:10.287 回答
0

这是我在底部添加正文边框的方法：

body {
  box-sizing: border-box;
  min-height: 100vh;
  margin: 0;
  border-bottom: solid 5px #ad3127;
  padding-top: 1px;
}
<p>content</p>

关键是min-height: 100vh，它确保身体高度至少是视口的高度。因为box-sizing: border-box，身体的边界将被计入身体高度。仍然存在内容边距将边框推到视口下方的问题，但这可以用任意padding-top值修复。

于 2015-09-07T09:18:23.893 回答