如何让页脚固定在页面底部

发布于 2024-10-20 03:14:34 字数 347 浏览 4 评论 0原文

在我的 html 中，我有一个名为“页脚”的 div。我希望它有一个 #000 的背景并占据整个页面宽度，并且后面不留空白。

我目前正在使用这个CSS：

.footer {
  color: #fff;
  clear: both;
  margin: 0em 0em 0em 0em;
  padding: 0.75em 0.75em;
  background: #000;
  position: relative;
  top: 490px;
  border-top: 1px solid #000;
}

但是整个页面宽度没有用这个CSS代码填充。

有什么帮助吗？谢谢！

原文

In my html I have a div classed "footer". I want it to have a bg to #000 and occupy the full page width and left no white space after it.

I am currently using this CSS:

.footer {
  color: #fff;
  clear: both;
  margin: 0em 0em 0em 0em;
  padding: 0.75em 0.75em;
  background: #000;
  position: relative;
  top: 490px;
  border-top: 1px solid #000;
}

But the full page width isn't filled with this css code.

Any help? Thanks!

分享到QQ

分享到微博

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

发布评论

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

笑咖 2024-10-27 03:14:34

我使用粘性页脚： http://ryanfait.com/sticky-footer/

/*

    Sticky Footer by Ryan Fait
    http://ryanfait.com/

    */

* {
  margin: 0;
}

html,
body {
  height: 100%;
}

.wrapper {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 auto -142px;
  /* the bottom margin is the negative value of the footer's height */
}

.footer,
.push {
  height: 142px;
  /* .push must be the same height as .footer */
}

<div class='wrapper'>
  body goes here
  <div class='push'></div>
</div>
<div class='footer'>Footer!</div>

本质上，包装器的高度为 100%，页脚的高度为负边距，确保页脚始终位于底部，而不会导致滚动。

这应该可以实现您的目标，即拥有 100% 宽度的页脚和较窄的正文，因为 div 是块级元素，并且默认情况下它们的宽度是其父级的 100%。请记住，此处的页脚不包含在包装 div 中。

I use sticky footer: http://ryanfait.com/sticky-footer/

/*

    Sticky Footer by Ryan Fait
    http://ryanfait.com/

    */

* {
  margin: 0;
}

html,
body {
  height: 100%;
}

.wrapper {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 auto -142px;
  /* the bottom margin is the negative value of the footer's height */
}

.footer,
.push {
  height: 142px;
  /* .push must be the same height as .footer */
}

<div class='wrapper'>
  body goes here
  <div class='push'></div>
</div>
<div class='footer'>Footer!</div>

Essentially, the wrapper is 100% height, with a negative margin the height of the footer ensuring the footer is always at the bottom without causing scroll.

This should accomplish your goal of having a 100% width footer and narrower body as well, because divs are block level elements, and their width is by default 100% of their parent. Keep in mind the footer here is not contained by the wrapper div.

回复收藏 0 原文

夏至、离别 2024-10-27 03:14:34

您可以将页脚 div 设为页面绝对值，如下所示：

.footer {
    position:absolute;
    bottom:0px;
    width: 100%;
    margin: 0;
    background-color: #000;
    height: 100px;/* or however high you would like */
}

you could make the footer div absolute to the page like this:

.footer {
    position:absolute;
    bottom:0px;
    width: 100%;
    margin: 0;
    background-color: #000;
    height: 100px;/* or however high you would like */
}

回复收藏 0 原文

软的没边 2024-10-27 03:14:34

我为网页的每个部分使用了一些 DIV 元素。

<div id="tplBody">
  <div id="tplHeader">
    ...
  </div>
  <div id="tplContent">
    ...
  </div>
  <div id="tplFooter">
    ...
  </div>
</div>

每个部分都有相对定位。使用包装 DIV，我可以将包装器设置为特定宽度，并且其中的元素可以是 100% 宽度。

我建议您避免使用绝对定位和浮动，因为它们会产生兼容性问题，因此可能无法在所有浏览器上正确显示。

I use a few DIV elements for each section of my webpages.

<div id="tplBody">
  <div id="tplHeader">
    ...
  </div>
  <div id="tplContent">
    ...
  </div>
  <div id="tplFooter">
    ...
  </div>
</div>

Each section is relatively positioned. Using wrapping DIVs, I can set the wrapper a specific width and the elements inside it can be 100% width.

I suggest you steer away from absolute positioning and floating, because they create compatibility issues so may not appear correctly on all browsers.

回复收藏 0 原文

ぺ禁宫浮华殁 2024-10-27 03:14:34

如果您希望页脚固定在页面上：

.footer{ position:fixed;}

但如果您希望页脚固定在页面末尾：

看到

if you want that your footer be fixed on your page :

.footer{ position:fixed;}

but if you want your footer fixed end of page :

see that

回复收藏 0 原文

遗心遗梦遗幸福 2024-10-27 03:14:34

我很高兴你们提供的支持，每一个回复都对我有所帮助。我来到这段代码：

.footer {
  height: 59px;
  margin: 0 auto;
  color: #fff;
  clear: both;
  padding: 2em 2em;
  background: #000;
  position: relative;
  top: 508px;
}

谢谢！

I'm glad for the support you all provided, each one of these replies helped me somehow. I came to this code:

.footer {
  height: 59px;
  margin: 0 auto;
  color: #fff;
  clear: both;
  padding: 2em 2em;
  background: #000;
  position: relative;
  top: 508px;
}

Thanks!

回复收藏 0 原文

允世 2024-10-27 03:14:34

当我使用 Bootstrap 菜单和固定页脚启动 Web 应用程序时，我遇到了这个问题，无论浏览器分辨率如何。

使用以下样式作为页脚元素

内联样式

中使用 class 属性的外部样式表

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

在 Div style.css

  .footer
  {
   backgroud-color:black;
   position:fixed;
   bottom:0;
   height:2%;
  }

中使用 id 属性的外部样式表

 <div id="divfooter"></div>

在 Div style.css

 #divfooter
 {
  backgroud-color:black;
  position:fixed;
  bottom:0;
  height:2%;
 }

This issue i have came cross when I started an web application using Bootstrap menu and fixed footer irrespective of browser resolution.

Use below styling for footer element

In-line style

External style sheet using class attribute in Div

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

style.css

  .footer
  {
   backgroud-color:black;
   position:fixed;
   bottom:0;
   height:2%;
  }

External style sheet using id attribute in Div

 <div id="divfooter"></div>

style.css

 #divfooter
 {
  backgroud-color:black;
  position:fixed;
  bottom:0;
  height:2%;
 }

回复收藏 0 原文

江湖正好 2024-10-27 03:14:34

您可以在CSS中使用此样式来实现您的目标

.footer{
   background-color: #000;
   min-width: 100%;
   height: 100px;
   bottom:0;
   position: fixed;
}

如果您使用引导程序，请尝试使用margin-left: -15px和margin-right:-15px，但在大多数情况下，当您拥有自己的类时，这是不必要的。

You can use this styles in your CSS to achieve your goal

.footer{
   background-color: #000;
   min-width: 100%;
   height: 100px;
   bottom:0;
   position: fixed;
}

If you are using bootstrap try with margin-left: -15px and margin-right:-15px but it will not be necessary in most cases when you have your own class.

回复收藏 0 原文

浅唱々樱花落 2024-10-27 03:14:34

html:

<div class="footer">
    <p>
        Some text comes here! © 2015 - 2017
    </p>
</div>

css:

.footer {
    width: 100%;
    height: auto;
    text-align: center;
    background: rgb(59, 67, 79);
    position: fixed;
    bottom: 0%;
    margin-top: 50%;
}

* {
    padding: 0;
    margin: 0;
}

html:

<div class="footer">
    <p>
        Some text comes here! © 2015 - 2017
    </p>
</div>

css:

.footer {
    width: 100%;
    height: auto;
    text-align: center;
    background: rgb(59, 67, 79);
    position: fixed;
    bottom: 0%;
    margin-top: 50%;
}

* {
    padding: 0;
    margin: 0;
}

回复收藏 0 原文

舂唻埖巳落 2024-10-27 03:14:34

我遇到了同样的问题并使用 jquery 解决了它。

<body>
    <div id="header" style="background-color: green">This is header</div>
    <div id="main-body" style="background-color: red">This is body</div>
    <div id="footer" style="background-color: grey">This is footer</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
if(($(document).height() - $("body").height()) > 0){
    var main_body_height = $(document).height() - $("#footer").height() - $("#header").height()
    $('#main-body').css('min-height', main_body_height+'px');
}
</script>

我在这里所做的是基于用户的屏幕尺寸。
我在减去页眉和页脚的高度后增加了主体部分的高度。
如果完整的 html 正文高度小于用户屏幕尺寸，那么它将增加主体部分的高度，并且页脚将自动到达页面底部。

I was facing same issue and solved it with using jquery.

<body>
    <div id="header" style="background-color: green">This is header</div>
    <div id="main-body" style="background-color: red">This is body</div>
    <div id="footer" style="background-color: grey">This is footer</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
if(($(document).height() - $("body").height()) > 0){
    var main_body_height = $(document).height() - $("#footer").height() - $("#header").height()
    $('#main-body').css('min-height', main_body_height+'px');
}
</script>

What I'm doing here is based on the Screen size of the User.
I'm increasing the main-body section height after subtracting the height of header and footer from it.
If the complete html body height is less then the user screen size then it will increase the main-body section height and automatically footer will reach the bottom of page.

回复收藏 0 原文

~没有更多了~