我的首页出现问题-我的内容不足以显示整页,因此我试图将本节的位置设置在底部的页脚上方。
我使用positon成功:固定;底部:50px;放在页脚上方,但是当我在iPad上打开导航时,导航将消失在该部分的后面。
我不确定如何解决该问题,我尝试使用vertical-align:bottom;但无法正常工作。
我的CSS:
section.hero {
max-height: 400px;
text-align: center;
img.hero-responsive {
width: 100%;
height: 100px;
}
h2 {
width: 90%;
margin: 0 auto;
font-size: 1.5em;
top: -90px;
font-weight: 800;
position: relative;
}
h3 {
position: relative;
top: -60px;
font-weight: 800;
}
}
section.info {
background-color: #464646;
height: auto;
position: relative;
top: -50px;
width: 100vw;
padding: 0px;
left: -5px;
text-align: center;
color: white;
padding-bottom: 50px;
.row {
margin: 0px !important;
padding: 0px !important;
.col-lg-3 {
border-top: 2px solid rgba(160, 160, 160, 0.8);
margin-top: 5px !important;
padding: 0px !important;
i {
font-size: 40px;
padding: 10px;
margin: 25px !important;
padding: 0px !important;
}
i.laravel { color: #f05340; }
i.wordpress { color: #21759b; }
i.sass { color: #cd6799; }
img {
width: 50px;
height: 40px;
margin: 10px !important;
padding: 0px !important;
}
h2 {
margin: 0px !important;
padding: 0px !important;
}
p {
width: 95%;
margin: 0px auto 0px auto !important;
padding: 0px 0px 10px 0px !important;
}
}
}
}
@media only screen and (min-width: 768px) {
section.hero {
img.hero-responsive {
width: 450px;
}
h2 {
width: 400px;
top: -80px;
}
}
section.info {
top: auto;
position: absolute;
}
}
@media only screen and (min-width: 1000px) {
section.hero {
h3 {
top: -30px;
}
}
section.info {
min-height: 500px;
position: unset;
margin-left: -5px;
}
}
答案 0 :(得分:1)
<body class="Site">
<header>…</header>
<main class="Site-content">…</main>
<footer>…</footer>
</body>
.Site {
display: flex;
min-height: 100vh;
flex-direction: column;
}
.Site-content {
flex: 1;
}
答案 1 :(得分:0)
您可以尝试使用flexbox。如果您共享一个Codepen或完整的示例,它将更容易为您提供帮助
<body class="Site">
<header>…</header>
<main class="Site-content">…</main>
<footer>…</footer>
</body>
.Site {
display: flex;
min-height: 100vh;
flex-direction: column;
}
.Site-content {
flex: 1;
}