Tan*_*ix1 0 html css jsfiddle web
我想要完成的是将所有页面的页脚放在正文内容之下.所有页面都有不同大小的正文内容.对我来说,具有挑战性的一点是只为所有页面保留一个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
Jam*_*ong 13
哇 - 这个链接很旧.我们现在有了一些更好的技术,即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>你可以在这里阅读所有相关内容