Html 防止固定页脚重叠内容

Question

提问by Robert Morgan

I've fixed my footer DIV to the bottom of the viewport as follows:

我已将页脚 DIV 固定到视口底部，如下所示：

#Footer
{
    position: fixed;
    bottom: 0;
}

This works well if there isn't much content on the page. However, if the content fills the full height of the page (i.e. the vertical scroll bar is visible) the footer overlaps the content, which I don't wont.

如果页面上的内容不多，这很有效。但是，如果内容填满了页面的整个高度（即垂直滚动条可见），则页脚与内容重叠，我不会这样做。

How can I get the footer to stick to the bottom of the viewport, but never overlap the content?

我怎样才能让页脚粘在视口的底部，但不要与内容重叠？

Answer 1

回答by Scott Weaver

A modern "sticky footer" solution would use flexbox.

现代的“粘性页脚”解决方案将使用flexbox。

tl;dr:: set container (body) to display:flex;flex-direction:columnand the child (footer) you want to move down to margin-top:auto.

tl;dr::: 将容器（主体）设置为display:flex;flex-direction:column和您要向下移动到的子项（页脚）margin-top:auto。

First, we set the body to "flex" its items vertically, making sure that it is 100% height.

首先，我们将主体设置为垂直“弯曲”其项目，确保其高度为 100%。

Then we set flex: 0 0 50pxon the footer element, which means: "don't grow, don't shrink, and have a height of 50px". We could in fact, omit flexattribute entirely and just go with height:50px.

然后我们flex: 0 0 50px在footer元素上设置，意思是：“不增长，不收缩，高度50px”。事实上，我们可以flex完全省略属性，只使用height:50px.

We can set display:flexon things like the <body>itself somewhat recklessly, because children of a flex container have a implicit value of flex: 0 1 auto(aka flex:initial) if omitted, which is (almost) equivalent to flex:none(which is shorthand for flex:0 0 auto):

我们可以有点鲁莽地设置display:flex像它<body>本身这样的东西，因为如果省略，flex 容器的子级具有flex: 0 1 auto(aka flex:initial)的隐式值，这（几乎）等效于flex:none（这是的简写 flex:0 0 auto）：

The item is sized according to its width and height properties. It shrinks to its minimum size to fit the container, but does not grow to absorb any extra free space in the flex container.(MDN)

项目根据其宽度和高度属性调整大小。它会缩小到适合容器的最小尺寸，但不会增长以吸收 flex 容器中的任何额外可用空间。（MDN）

As far as the sticky part, it's the margin-top:autoon the footer that gives us what we want. Applied within a flex container, auto margins take on a new meaning, instead of the usual "get equal amount of free space", they mean "absorb ALL available free space".

就粘性部分而言，margin-top:auto页脚上的内容为我们提供了我们想要的东西。在 flex 容器中应用，自动边距具有新的含义，而不是通常的“获得等量的可用空间”，它们的意思是“吸收所有可用的可用空间”。

From the spec (8.1. Aligning with auto margins):

从规范（8.1. 与自动边距对齐）：

Prior to alignment via justify-content and align-self, any positive free space is distributed to auto marginsin that dimension.

在通过 justify-content 和 align-self 对齐之前，任何正自由空间都会分配到该维度的自动边距。

Stated more simply:

更简单地说：

If you apply auto margins to a flex item, that item will automatically extend its specified margin to occupy the extra spacein the flex container

如果你对一个 flex 项目应用自动边距，该项目将自动扩展其指定的边距以占据flex 容器中的额外空间

Aside: the "normal" flexbox layout approach would probably be to flex a middle section ala <div id="main>...</div>to 100% vertically, which alsowould make a footer "stick" to the bottom. This approach shows us the flexible box model is, in fact, flexible enough to let us resize/move isolated elements.

旁白：“正常”的 flexbox 布局方法可能是将中间部分 ala<div id="main>...</div>垂直 100%弯曲，这也会使页脚“粘”到底部。这种方法向我们展示了弹性盒模型实际上足够灵活，可以让我们调整/移动孤立元素的大小。

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

#footer {
  background-color: #efefef;
  flex: 0 0 50px;/*or just height:50px;*/
  margin-top: auto;
}

<p>we've assumed only that there's random space-taking content above the footer...</p>

<p>lorem ipsum dolor flex...</p>
<div>
  <p>random content.</p><p>random content.</p><p>random content.</p><p>random content.</p>
</div>
<div id="footer">FOOTER</div>

Answer 2

回答by Adrian

The problem is that fixedposition takes it out of document flow. You can add margin-bottomto the body content equal to the height of #Footer. This will ensure that there is always an empty space behind the footer equal to its height, preventing it from overlapping the content.

问题是fixed位置将其从文档流中移除。您可以添加margin-bottom等于#Footer. 这将确保页脚后面总是有一个等于其高度的空白空间，防止它与内容重叠。

Answer 3

回答by Adil

This is another solution which I use using jQuery. To get it set-up, you don't need to code much, and you only need HTML.

这是我使用 jQuery 使用的另一个解决方案。要设置它，您不需要编写太多代码，您只需要 HTML。

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>Your title</title>
  <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
  <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
  <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>

<body>
  <div data-role="page">
    <div data-role="header" data-position="fixed">
      <h1>Your Header</h1>
    </div>
    <div data-role="main" class="ui-content">
      <p style="font-size: 300%;">
         Some text to enable scrolling... 
        Some text to enable scrolling... 
        Some text to enable scrolling... 
        Some text to enable scrolling... 
        Some text to enable scrolling... 
        Some text to enable scrolling... 
        Some text to enable scrolling... 
        Some text to enable scrolling... 
        Some text to enable scrolling... 
        Some text to enable scrolling... 
        Some text to enable scrolling... 
        Some text to enable scrolling... 
        Some text to enable scrolling... 
        Some text to enable scrolling... 
        Some text to enable scrolling... 
        Some text to enable scrolling... 
        Some text to enable scrolling... 
        Some text to enable scrolling... 
        Some text to enable scrolling... 
        Some text to enable scrolling... 
        Some text to enable scrolling... 
        Some text to enable scrolling... 
        Some text to enable scrolling... 
        Some text to enable scrolling... 
        Some text to enable scrolling... 
        Some text to enable scrolling... 
        Some text to enable scrolling... 
        Some text to enable scrolling... 
        Some text to enable scrolling... 
        Some text to enable scrolling... 
        Some text to enable scrolling... 
        Some text to enable scrolling... 
        Some text to enable scrolling... 
        Some text to enable scrolling... 
        Some text to enable scrolling... 
        Some text to enable scrolling... 
        Some text to enable scrolling... 
        Some text to enable scrolling... 
        Some text to enable scrolling... 
        Some text to enable scrolling... 
        Some text to enable scrolling... 
        Some text to enable scrolling... 
        Some text to enable scrolling... 
        Some text to enable scrolling... 
        Some text to enable scrolling... 
        Some text to enable scrolling... 
        Some text to enable scrolling... 
        Some text to enable scrolling... 
        Some text to enable scrolling... 
      </p>
    </div>
    <div data-role="footer" data-position="fixed">
      <h1>Your Footer</h1>
    </div>
  </div>
</body>

</html>

This is from w3schools - fixed toolbars, but I thought it could be more useful than some other answers.

这是来自w3schools-fixed toolbars，但我认为它可能比其他一些答案更有用。

Answer 4

回答by David Pet

Try setting your position attribute to static

尝试将您的位置属性设置为静态

position: static;

Html 防止固定页脚重叠内容

提问by Robert Morgan

回答by Scott Weaver

回答by Adrian

回答by Adil

回答by David Pet

相关推荐

最近更新

标签

Html 防止固定页脚重叠内容

提问by Robert Morgan

回答by Scott Weaver

回答by Adrian

回答by Adil

回答by David Pet

相关推荐

如何在 HTML 中制作三角形？

Html 使用 CSS 的水平表格布局

Html 矩形图像的 CSS 圆形裁剪

Html 是否有网络安全字体的现代列表？

相关推荐

最近更新

标签