[英]How do I keep the header from shifting down when I resize the window
When I drag the right side of the screen all the way to the left, the header menu (class="header-links") will shift down a little.当我将屏幕的右侧一直拖到左侧时,header 菜单(class="header-links")会向下移动一点。 How do I stop it from shifting down?如何阻止它向下移动? Also, when I drag the screen from the bottom to the top, the footer (class="footer-side-links") does not stay within the screen.此外,当我将屏幕从底部拖到顶部时,页脚 (class="footer-side-links") 不会留在屏幕内。 In other words, I want the footer to still be visible when I drag the screen from the bottom to the top.换句话说,当我将屏幕从底部拖到顶部时,我希望页脚仍然可见。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My Portfolio</title>
<link rel="stylesheet" type="text/css" href="portfolio.css">
<link href="https://fonts.googleapis.com/css2?family=Karla&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Lexend+Zetta&display=swap" rel="stylesheet">
<script src="https://use.fontawesome.com/82c7176f2a.js"></script>
</head>
<body>
<div class="profile">
<img class="profile-image" src="https://gamerheadquarters.com/hub/avatar/fallout76tshirt.jpg" alt="profile picture">
<figcaption class="name">JOHN <span>JOHNSON</span></figcaption>
</div>
<div class="header-background">
</div>
<div class="wrapper">
<hr>
<header>
<nav class="header-links">
<a href="#Home">Home</a>
<a href="#About">About</a>
<a href="#Projects">Projects</a>
<a href="#Contact">Contact</a>
</nav>
</header>
<footer>
<nav class="footer-side-links">
<a href="#link" target="_blank"><i class="fa fa-linkedin" aria-hidden="true"></i></a>
<a href="#link" target="_blank"><i class="fa fa-instagram" aria-hidden="true"></i></a>
<a href="#link" target="_blank"><i class="fa fa-github" aria-hidden="true"></i></a>
</nav>
</footer>
</div>
</body>
</head>
</html>
CSS CSS
.profile-image {
width: 200px;
height: 200px;
position: relative;
left: 750px;
top: 300px;
border: 7px solid #A9A9A9;
border-radius: 200px;
transition: transform 1s;
}
.profile-image:hover {
transform: rotate(360deg);
transition: transform 1s;
}
.name span {
color: orange;
position: relative;
}
.name {
position: relative;
left: 550px;
top: 330px;
font-size: 50px;
color: white;
font-family: 'Lexend Zetta', sans-serif;
}
.header-background {
background-color: #000033;
height: 500rem;
left: 0;
position: absolute;
top: 0;
width: 18rem;
position: fixed; /* this was added so when we scroll to right, it wont move */
}
hr {
color: #3d3d5c;
left: 0;
position: fixed;
top: 6rem;
width: 17.9rem;
}
.header-links a {
color: #cccfc2;
display: block;
font-family: 'Karla', sans-serif;
font-size: 1.2rem;
padding: 1.5rem;
position: relative;
left: 1rem;
bottom: 4rem;
text-decoration: none;
text-transform: uppercase;
}
.header-links {
position: fixed;
}
.header-links a:hover {
color: orange;
}
.footer-side-links a {
color: white;
padding: 0.3rem;
}
.footer-side-links a:hover {
color: orange
}
.footer-side-links {
left: 3rem;
position: fixed;
top: 50rem;
margin-left:
}
Try Using Viewport Units like vw or vh instead of px or rem it will help you make your webpage/website responsive and might solve your problem too.尝试使用视口单位,如vw或vh而不是px或rem ,它将帮助您使您的网页/网站具有响应性,也可能解决您的问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.