javascript 是否使用动态和绝对值在页面底部显示页脚？

fhity93d 于 2022-12-28 发布在 Java

关注(0)|答案(2)|浏览(127)

我有一个CSS，我希望页脚div显示在页面的所有内容之后。现在它不会显示在页面上，当我把页面的高度设置为“auto”时，但是如果我设置了一个任何排序的高度或最小高度，它会显示到它应该显示的高度。我可以这样做吗，或者我必须在每个页面上设置一个手动高度吗？CSS看起来像这样：

body 
{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: auto;
    background-image: url("background.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}

/* Dette er css til vores footer div boks */
div.footer 
{
    position: absolute;
    bottom: 0;
    height: 250px;
    left: 0;
    right: 0;
    padding: 1%;
    background-color: rgb(255, 255, 255);
    color: rgb(0, 0, 0);
    line-height: 200%;
    border: 1px solid black;
}

我试过使用flexbox，容器和网格，但它似乎只有工作，如果我插入一个手动高度的身体。

JavaScript

来源：https://stackoverflow.com/questions/74931369/display-footer-at-bottom-of-a-page-with-dynamic-and-absolute

2条答案

按热度按时间

r55awzrz1#

请尝试以下示例：.my-contnet元素的最小高度为100%，以获取页面的完整高度。
这样，无论页面上的内容有多少，页脚始终显示在页面的底部。
内容将填充页脚上方的剩余空间。

html,
body {
  height: 100%;
  margin: 0;
}

.my-contnet {
  min-height: 100%;
}

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
}

赞(0）回复(0）举报 2022-12-28

6uxekuva2#

这个呢？

div.header {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: normal;
}
video.header {
    position: relative;
    width: 100%;
    filter: brightness(60%);
    left: 50%;
    top: 50%;
    transform: translate(-50%,0%);
}
div.headline {
    position: absolute;
    left: 50%;
    border-radius: 50px;
    transform: translate(-50%,150%);
}
h1.headline {
    font-size: 500%;
    text-align: center;
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: black;
}
div.about {
    position: relative;
    background-color: rgba(255, 255, 255, 0.9);
    border: solid black 2px;
    border-radius: 40px;
    padding: 2%;
    display: flex;
    align-items: flex-start;
    margin-bottom: 280px;
}
table.text {
    width: 60%;
    padding-bottom: 1%;
}
table.img {
    padding-top: 5%;
}
div.footer {
    position:fixed;
}

元素的绝对位置导致页脚可见性问题。
另外，如果你不想页脚一直显示，只需将示例中的fixed位置替换为relative-页脚只有在访问者向下滚动到它时才会显示。但是，如果你这样做，请确保从div.about选择器中删除margin-bottom: 280px;规则。
请注意，这些只是一些快速修复-我还没有考虑您的网站是否会看起来很好（足够）在各种分辨率（手机，平板电脑，4：3等）。
您可能需要查找一些样板文件，例如Bootstrap offers。

赞(0）回复(0）举报 2022-12-28

我来回答

javascript 是否使用动态和绝对值在页面底部显示页脚？

2条答案

相关问题

热门标签

最新问答