如何解决移动端上推页脚的主要内容
我一直在寻找修复程序数小时。我很确定我没有正确使用它们。我尝试过使用包装器、负边距,甚至是 flex-grow 修复。我找不到任何东西来解决我的问题,所以我转向 Stack。在桌面宽度中,页脚停留在底部大概是因为内容没有在页脚位置下方增长。但是,当我将视口更改为较小的移动设备尺寸时,内容会增长并导致页脚升高。
html {
font-size: 18px;
box-sizing: border-box;
min-height: 100%;
}
body {
margin: 0;
padding: 0;
height: 100vh;
}
a {
text-decoration: none;
}
.width-container {
width: 90%;
margin: auto;
}
/* Nav Start */
nav {
background-color: #4b34fa;
}
nav > div {
display: flex;
justify-content: space-between;
align-items: center;
}
#nav-sub-container {
width: 35%;
display: flex;
justify-content: space-between;
align-items: center;
}
#link-container {
margin: 10px 0;
}
#nav-title {
font-size: 1.5em;
color: #fff;
}
.link {
margin: 10px;
font-size: 1.2em;
color: #fff;
}
.link:hover {
animation: link-hover 500ms forwards;
}
@keyframes link-hover {
0% {
font-size: 1.2em;
}
100% {
font-size: 1.3em;
}
}
#mail-icon > i {
color: #fff;
}
/* Nav End */
/* Main Start */
main {
height: 100%;
max-height: 100%;
}
#hero-flex {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
#hero-bg {
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: url('/imgs/hero-img.jfif');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
opacity: .5;
width: 100%;
height: 100%;
}
#hero-container {
position: relative;
height: 50%;
z-index: 1;
}
#hero-content > h1 {
margin: 0;
font-size: 1.5em;
color: #000;
}
#hero-content > p {
margin: 0;
font-size: 1.2em;
}
#hero-content > h1 > span {
animation: color-change 1s forwards;
}
@keyframes color-change {
0% {
color: #000;
}
100% {
color: #4b34fa;
}
}
#about-container {
height: 50%;
}
#about-container > div {
height: 100%;
display: grid;
grid-template-columns: repeat(2,1fr);
grid-template-rows: 1fr;
}
#about-container > div > div {
padding: 10px;
}
#about-me > h3{
margin: 10px 0;
font-size: 1.3em;
}
#about-me > p {
font-size: 1em;
}
#tech-icon-grid-container {
height: 50%;
display: grid;
grid-template-columns: repeat(4,1fr);
grid-template-rows: repeat(2,1fr);
}
#tech-icon-grid-container > p {
margin: 10px;
padding: 10px;
justify-self: center;
align-self: center;
background-color: #4b34fa;
color: #fff;
border-radius: 10px 20px;
}
#tech-icon-grid-container > p:hover {
background-color: #2b1aad;
cursor: default;
}
.purplify {
color: #4b34fa;
}
.purplify:hover {
color: #2b1aad;
}
/* Main End */
/* Footer Start */
footer {
display: flex;
justify-content: center;
align-items: flex-end;
}
#social-icon-container {
text-align: center;
}
.social-icon {
margin: 0 5px;
color: #4b34fa;
}
#social-icon-container > p {
margin: 10px;
}
/* Footer End */
/* Media Query */
@media only screen and (max-width: 1300px) {
#about-container > div {
grid-template-columns: 1fr;
grid-template-rows: repeat(2,1fr);
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Braden Hancock</title>
<!-- CSS -->
<link rel="stylesheet" href="./styles/main.css">
<link rel="stylesheet" href="./styles/mobile.css">
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" rel="stylesheet">
</head>
<body>
<!-- Nav Start -->
<nav>
<div class="width-container">
<a href="#"> <h1 id="nav-title">Braden Hancock</h1> </a>
<div id="nav-sub-container">
<div id="link-container">
<a href="#" class="link"> My Work </a>
<a href="#" class="link"> Blog </a>
<a href="#" class="link"> Resume </a>
</div>
<a href="" id="mail-icon"> <i class="fas fa-paper-plane fa-2x"></i> </a>
</div>
</div>
</nav>
<!-- Nav End -->
<!-- Main Start -->
<main>
<div id="hero-container">
<div id="hero-bg"></div>
<div class="width-container" id="hero-flex">
<div id="hero-content">
<h1>Hey I'm <span id="hero-color-fade">Braden</span> </h1>
<p>Front-End Web Developer</p>
</div>
</div>
</div>
<div id="about-container">
<div class="width-container">
<div id="about-me">
<h3>My Journey</h3>
<p>In 2019,I recieved an email for a free trial of Codecademy Pro. I decided to give it a try,and I was amazed by how straight forward it was. Boy was I in for a surprise. I managed to gain a strong understanding of HTML and a basic understanding of CSS in my one month trial. I moved on to using other resources,mostly Google and Youtube when my trial ran out. Throughout the next few months I really started to get familiar with CSS,but I got bored. This is when I took my first look at JavaScript. It was very alien compared to HTML and CSS. The syntax was completely different from anything I had ever seen before,and the material was a lot harder to comprehend. Upon doing some further research I decided to buy a course on Udemy. This course advertised to take you from,"Zero to Hero". I spent a few months studying this course and completing small projects. This course was really good for learning the fundamentals of things like,functions,loops,arrays,objects,and classes. When I completed the course I decided to start putting what I had learned to use with projects that weren't prepared for me. This was when I began having to learn how to search for the answers I needed. I learned how to use Stackoverflows' search engine and began participating with the community. For me,learning how to search and find the information I'm looking for has been one of the most impactful things I've learned. I have worked with a few other programming languages briefly,and I must say JavaScript is my favorite. I love being able to switch from front-end to back-end work so easily,and it has quite a few frameworks I'm very fond of.</p>
</div>
<div id="tech">
<h3>Tech I Often Use</h3>
<div id="tech-icon-grid-container">
<p>HTML</p>
<p>CSS</p>
<p>SCSS</p>
<p>JavaScript</p>
<p>NodeJS</p>
<p>ReactJS</p>
<p>Jest</p>
<p>Git</p>
</div>
<div id="tech-writeup">
<p>Above I listed a few languages I enjoy using. I didn't include any frameworks because there are so many it would cover this page in icons. A few of my favorites however are,<span class="purplify">Express</span>,<span class="purplify">Axios</span>,<span class="purplify">Cheerio</span>,<span class="purplify">EJS</span>,<span class="purplify">Handlebars</span>,and <span class="purplify">Mongoose</span>.</p>
</div>
</div>
</div>
</div>
</main>
<!-- Main End -->
<!-- Footer Start -->
<footer>
<div id="social-icon-container">
<a href="#" class="social-icon" id="facebook-icon"> <i class="fab fa-facebook-f"></i> </a>
<a href="#" class="social-icon" id="twitter-icon"> <i class="fab fa-twitter"></i> </a>
<a href="#" class="social-icon" id="github-icon"> <i class="fab fa-github-alt"></i> </a>
<p>© 2021 Braden Hancock</p>
</div>
</footer>
<!-- Footer End -->
<!-- JavaScript -->
<script src="./js/app.js"></script>
<!-- Font Awesome Kit -->
<script src="https://kit.fontawesome.com/2293124854.js" crossorigin="anonymous"></script>
</body>
</html>
解决方法
将 height: 100vh
替换为 min-height: 100vh
,在 body
的 css 中:
body {
...
min-height: 100vh;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。