如何在 HTML 和 CSS 中使用 html 对象编写粘性页脚？

发布于 2024-11-14 05:14:50 字数 1167 浏览 6 评论 0原文

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

问题：由于应用于 body 的样式，我将 border-bottom 和 border-top 应用于 html 对象，因此底部边框永远不会粘在页面底部就像通常的粘页脚情况一样。

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

My Redesign

这是我用于 html 和 body 的（较少）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;
}

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

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

原文

I'm using Less Framework 4 for two websites I'm designing. In both designs I want to apply a 5 pixel border both on top and bottom of the document.

The problem: because of the styles applied to body, I'm applying the border-bottom and border-top to the html object, so the bottom border never sticks to the bottom of the page like it would happen in a usual sticky footer situation.

Here are the screenshots for the two cases:

My Redesign

Here's the (LESS) CSS I'm using for html and body: 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;
}

I've tried using height: 100% both for the body and html objects, but here's how it looks live: http://prikonline.be/prikactie/

How should I stick the border to the bottom of the page?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

你丑哭了我 2024-11-21 05:14:50

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

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

然后将其插入到或其他内容之前

<div class="footer"></div>

You could instead use a footer wrapper like this.

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

and just insert this right before </body> or somehting

<div class="footer"></div>

回复收藏 0 原文

没︽人懂的悲伤 2024-11-21 05:14:50

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

回复收藏 0 原文

别低头，皇冠会掉 2024-11-21 05:14:50

尝试将其更改为：

height:auto;

用于您的 HTML CSS。

Try changing it to:

height:auto;

for your HTML CSS.

回复收藏 0 原文

阳光的暖冬 2024-11-21 05:14:50

嗯...将 min-height: 100% 放在页面上的 html 元素上（在 Web Inspector 中进行操作）在 Chrome 中立即对我有用；你在测试什么？

然而，由于边框的高度，这种方法确实有点超过 100%，您可以在 IE8+/Gecko/WebKit 中使用 CSS box-sizing 属性（使用值 border-box）。

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

回复收藏 0 原文

嘿嘿嘿 2024-11-21 05:14:50

看起来您正在使用某种动态样式表工具（如 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
}

It looks like you're using some sort of dynamic stylesheet tool (like LESS). Usually the dynamic stylesheet tools let you use JavaScript. So you could define height as:

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

And then add something like

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

Of course, the problem with this is that if the user were to resize his/her browser window, the layout would not update appropriately. You could use the window.onresize callback to handle that.

Of course, you could use JavaScript to handle the whole thing. Granted, some vehemently oppose the use of JavaScript to do styling (separation of behavior, content, and style), when attempting things like a sticky footer, sometimes its easier to just write two lines of JavaScript than to try to come up with some clever CSS that may or may not work in every browser you're trying to target. If the user has JavaScript turned off, then the page just doesn't fill the whole height of the page on pages with less content.

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
}

回复收藏 0 原文

国粹 2024-11-21 05:14:50

我不建议您将 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 中:)

I do not advise you to apply CSS to html element. Instead create div with similar styles.
In general case your code sould be like this:

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

This works perfect in all browsers, even in IE6 :)

回复收藏 0 原文

誰ツ都不明白 2024-11-21 05:14:50

您始终可以实现此有效的粘性页脚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>©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编辑为您想要的社交风格图像（或包含字体awesome包如果有的话）。

You can always implement this working sticky-footer CSS (I've added with inline social bar):

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

Just edit the hrefs to your own personal urls, and the image src to the social style images you want (or include the font awesome package if you have it).

回复收藏 0 原文

情感失落者 2024-11-21 05:14:50

以下是我在底部添加主体边框的方法：

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，body 的边框将计入 body 高度。仍然存在内容边距将边框推到视口下方的问题，但可以使用任意 padding-top 值来修复。

Here is how I added a body border at the bottom:

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

<p>content</p>

The key is min-height: 100vh, which ensures that body height will at least be height of the viewport. Because of box-sizing: border-box, border of the body will be accounted in the body height. There is still a problem of content margins pushing the border below viewport, but that can be fixed with an arbitrary padding-top value.

回复收藏 0 原文

~没有更多了~