当我调整浏览器 window 的大小时，div 消失了
[英]Divs disappearing when I resize the browser window
问题描述
请多多包涵，我还是前端开发的初学者。 我正在尝试使用 CSS Grid 创建一个响应式网站，但现在卡住了，因为当我调整 window 的大小时，我的“汉堡”菜单和页脚一直消失。 我知道代码远非好，但我很沮丧，我想请你帮忙。 我应该以某种方式使用媒体查询来解决这个问题还是其他什么？
非常感谢。
$(document).ready(function() { $(".hamburger_btn").click(function() { $(this).toggleClass("active"); $(".hamburger_info").toggleClass("active"); }); });
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&display=swap'); * { padding: 0; margin: 0; list-style: none; text-decoration: none; font-family: 'Montserrat', sans-serif; font-weight: 400; box-sizing: border-box; } body { background: #0F1014; overflow: hidden; }.grid-container { display: grid; grid-template-columns: 0.5fr repeat(2, 1.5fr) 0.5fr; grid-template-rows: 0.5fr 2fr 0.5fr; grid-gap: 1px 1px; grid-template-areas: "header header header header" "leftbar main main rightbar" "footer footer footer footer"; }.footer { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 1.1fr 0.9fr; grid-gap: 1px 1px; grid-template-areas: ". . ." "copyright copyright copyright"; grid-area: footer; text-align: center; top: 150%; position: relative; }.copyright { grid-area: copyright; color: #ffffff; }.header { grid-area: header; }.leftbar { grid-area: leftbar; }.rightbar { grid-area: rightbar; }.main { display: grid; grid-template-columns: repeat(2, 1fr) 0fr; grid-template-rows: repeat(2, 1fr); grid-gap: 1px 1px; grid-template-areas: "name menu." "name menu."; grid-area: main; }.name { grid-area: name; width: 100vh; font-size: 5em; font-family: 'Montserrat', sans-serif; font-weight: 600; color: #fff; top: 35%; left: 25%; }.grid-container.main.hamburger_btn { width: 3.13em; height: 3.13em; margin: 0 auto 16px; border-radius: 50%; border: 3px solid #fff; position: relative; cursor: pointer; }.grid-container.main.hamburger_btn>div { position: absolute; top: 45%; left: 25%; width: 50%; height: 3px; background: #fff; border-radius: 3.13em; transition: all 0.3s linear; }.grid-container.main.hamburger_btn.one { top: 25%; }.grid-container.main.hamburger_btn.three { top: 65%; }.grid-container.main.hamburger_info { width: 10em; height: auto; margin: 0 auto; background: #fff; position: relative; opacity: 0; top: -10px; transition: all 0.5s linear; }.grid-container.main.hamburger_info ul li { text-align: center; text-transform: uppercase; transition: all 0.2s linear; }.grid-container.main.hamburger_info ul li a { padding: 0.63em; font-size: 12px; color: #757575; display: block; transition: all 0.2s linear; }.grid-container.main.hamburger_info ul li:hover { background: #c62020; }.grid-container.main.hamburger_info ul li:hover a { color: #fff; }.grid-container.main.hamburger_info:before { content: ""; position: absolute; top: -1.19em; left: 50%; transform: translateX(-50%); border-top: 0.63em solid transparent; border-bottom: 0.63em solid #fff; border-left: 0.63em solid transparent; border-right: 0.63em solid transparent; }.grid-container.hamburger_btn.active { transform: rotate(90deg); }.grid-container.hamburger_btn.active.one { top: 45%; left: 25%; transform: rotate(45deg); }.grid-container.hamburger_btn.active.two { opacity: 0; }.grid-container.hamburger_btn.active.three { top: 45%; left: 25%; transform: rotate(-45deg); }.grid-container.main.hamburger_info.active { opacity: 1; top: 0px; }.fa { padding: 1.25em; font-size: 1.88em; width: 5em; text-decoration: none; }.fa:hover { opacity: 0.7; background: #c62020; color: #ffffff; }.fa-facebook { position: relative; left: 80%; background: #0F1014; color: #ffffff; }.fa-instagram { background: #0F1014; color: #ffffff; }.fa-envelope-o { position: relative; right: 80%; background: #0F1014; color: #ffffff; }
<,DOCTYPE html> <html> <head> <title>Learning</title> <meta name="viewport" content="width=device-width. initial-scale=1,0"> <meta http-equiv="X-UA-Compatible" content="IE=edge.chrome=1"> <meta name="HandheldFriendly" content="true"> <link rel="stylesheet" href="style:css"> <link rel="stylesheet" href="https.//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min:css"> <script src="https.//code.jquery.com/jquery-3.4.1.min.js"></script> <script src="script.js"></script> </head> <body> <div class="grid-container"> <div class="footer"> <a href="#" class="facebook"><i class="fa fa-facebook"></i></a> <a href="#" class="instagram"><i class="fa fa-instagram"></i></a> <a href="contact,html" class="contact"><i class="fa fa-envelope-o"></i></a> <div class="copyright">Copyright © 2020. NAME. All rights reserved.</div> </div> <div class="header"></div> <div class="leftbar"></div> <div class="rightbar"></div> <div class="main"> <div class="name"> <header>NAME</header> </div> <div class="menu"> <div class="hamburger_btn"> <div class="one"></div> <div class="two"></div> <div class="three"></div> </div> <div class="hamburger_info"> <ul> <li><a href="index.html">Home</a></li> <li><a href="experience.html">Experience</a></li> <li><a href="design.html">Graphic Design</a></li> <li><a href="about.html">About</a></li> </ul> </div> </div> </div> </div> </body> </html>
1 个解决方案
解决方案1
0 已采纳 2020-07-16 15:25:21
.name {
width: 100vh; /* Remove this */
}
.hamburger_btn {
float:right; /* If you want it to go right */
}
当我使用包装div调整窗口大小时，div正在移动吗？
[英]Divs are moving around when I resize the window even with a wrapper div?
调整浏览器窗口大小时，它会覆盖我的幻灯片内容-Bootstrap
[英]When I resize browser window it covers my slideshow content - Bootstrap
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.