内容高度不同的底边距

发布于 2024-09-28 03:51:13 字数 938 浏览 6 评论 0原文

我有一个问题一直试图解决，但没有任何进展。

这是我的代码的摘要：

body {
  background-image: url('img/bg_Body.gif');
  margin: 0px 0px 0px 0px;
}

#container {
  position: relative;
  width: 880px;
  margin-left: auto;
  margin-right: auto;
  top: 0px;
  min-height: 100%;
}

#content {
  position: absolute;
  top: 0px;
  left: 0px;
  background-image: url('img/faux_tile.png');
  min-height: 200px;
  padding-top: 105px;
  padding-right: 80px;
  min-width: 400px;
  padding-left: 80px;
  padding-bottom: 110px;
}

<div id="container">
  <div id="content">
    Some content here (Varying height)
  </div>
</div>

如何在内容和页尾之间添加边距？

faux_tile.png 覆盖到页面末尾，我想要页面末尾和 faux_tile.png 之间有一个边距，这是一个显示 bg_Body.gif 的小边距>。

原文

I have a problem I have been trying to solve, but without any progress.

This is a summary of my code:

body {
  background-image: url('img/bg_Body.gif');
  margin: 0px 0px 0px 0px;
}

#container {
  position: relative;
  width: 880px;
  margin-left: auto;
  margin-right: auto;
  top: 0px;
  min-height: 100%;
}

#content {
  position: absolute;
  top: 0px;
  left: 0px;
  background-image: url('img/faux_tile.png');
  min-height: 200px;
  padding-top: 105px;
  padding-right: 80px;
  min-width: 400px;
  padding-left: 80px;
  padding-bottom: 110px;
}

<div id="container">
  <div id="content">
    Some content here (Varying height)
  </div>
</div>

How do I add a margin between the content and the end of the page?

The faux_tile.png covers to the end of the page, I want a margin between the end of the page and the faux_tile.png, which is a small margin showing bg_Body.gif.

分享到QQ

分享到微博

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

发布评论

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

ζ澈沫 2024-10-05 03:51:13

试试这个：

#content {
    position: absolute;
    top: 0px;
    left: 0px;
    right:0;
    bottom:20px; /*this should give you 20px margin at the bottom*/
    background-image: url('img/faux_tile.png');
    min-height: 200px;
    padding-top: 105px;
    padding-right: 80px;
    min-width: 400px;
    padding-left: 80px;
    padding-bottom: 110px;
}

另一种方法可能是给 #container 一个小于 100% 的 min-height

try this:

#content {
    position: absolute;
    top: 0px;
    left: 0px;
    right:0;
    bottom:20px; /*this should give you 20px margin at the bottom*/
    background-image: url('img/faux_tile.png');
    min-height: 200px;
    padding-top: 105px;
    padding-right: 80px;
    min-width: 400px;
    padding-left: 80px;
    padding-bottom: 110px;
}

the other way could be to give #container a min-height of less than 100%

回复收藏 0 原文