gpt4 book ai didi

html - 如何将页脚保留在正文内容下方的页面底部

转载 作者:太空宇宙 更新时间:2023-11-03 19:39:02 25 4
gpt4 key购买 nike

我想要完成的是让所有页面的页脚都位于正文内容下方。所有页面都将具有不同大小的正文内容。对我来说最具挑战性的一点是为所有页面只保留一个 CSS。

我尽了最大努力在这里展示了 css 和 HTML,但没有成功。相反,这是我的代码的 JSFiddle:https://jsfiddle.net/zsrsd20m/

 .container {
min-height:80%;
position:relative;
}

.titleText{
width:100%;
padding-top: 35px;
padding-bottom: 35px;
background-color: #127577;

color: white;
text-align: center;
}

.navBar{
padding-right: 20px;
float:left;
}

.mainText{
height:100%;
padding-left:220px;
padding-right:250px;
padding-bottom:0px;
font-size: 20px;
text-align: justify;
}

.footerText{
width:100%;
padding-top: 35px;
padding-top: 23px;
background-color: #127577;
color: white;
text-align: center;
}

.Container 和所有其他用 HTML 制作的 Div 都是因为这个原因制作的:http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

我希望即使正文内容太小,页脚也始终位于页面底部。如果正文内容很大,同样适用。当前,当将正文内容的高度设置为 100% 时,即使内容很小并且不需要滚动条,它也会向我显示滚动条。当移除高度时,它使页脚直接位于小正文内容的下方,这是一半好,但它不在页面底部,所以看起来很糟糕。

问题截图: https://imgur.com/a/x16RC

最佳答案

哇——那个链接太旧了。这些天我们有一些更好的技术可用,即 flexbox。

/* The magic: */
.Site {
display: flex;
min-height: 100vh;
flex-direction: column;
}

.Site-content {
flex: 1;
}

/* Stlyes to make the demo easier to see: */
body { margin: 0; }
header { background-color: #FDD; }
main { background-color: #DFD; }
footer { background-color: #DDF; }
<body class="Site">
<header>Header</header>
<main class="Site-content">Content</main>
<footer>Footer</footer>
</body>

您可以阅读所有相关内容 right here

关于html - 如何将页脚保留在正文内容下方的页面底部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47650199/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com