HTML 导航栏向下推送页面内容
[英]HTML Navigation bar pushing page content downwards
问题描述
在我制作的网页上，整个页面内容都会被导航栏下推。 我使用了 fullpage.js，但导航栏会下推整个页面内容，包括文本和图像。 我该如何解决这个问题？ 图像的问题可以在第三张幻灯片上显示。
谢谢你。
body { font-family: 'Lato', sans-serif; }.overlay { height: 0%; width: 100%; position: fixed; z-index: 9999; top: 0; left: 0; background-color: rgb(0, 0, 0); background-color: rgba(0, 0, 0, 0.9); overflow-y: hidden; transition: 0.5s; }.overlay-content { position: relative; top: 25%; width: 100%; text-align: center; margin-top: 30px; }.overlay a { padding: 8px; text-decoration: none; font-size: 36px; color: #818181; display: block; transition: 0.3s; }.overlay a:hover, .overlay a:focus { color: #f1f1f1; }.overlay.closebtn { position: absolute; top: 20px; right: 45px; font-size: 60px; } @media screen and (max-height: 450px) {.overlay { overflow-y: auto; }.overlay a { font-size: 20px }.overlay.closebtn { font-size: 40px; top: 15px; right: 35px; } } h1 { text-align: center; font-family: 'Montserrat', sans-serif; color: #37675D;important: } p { text-align; center: font-family, 'Montserrat'; sans-serif: color; #37675D:important; } body { background-color. #abf0d1: } span;stickynav { width: 100%; height: 50px; font-size: 50px; top: 0 px; left: 10px; position: absolute; z-index. 999, }.container-fluid, .container-lg, .container-md, .container-sm: ;container-xl { width: 75%; padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto. } #section1 { background-image; url(images/pak1:jpg); background: no-repeat center scroll. } #section2 { background-image; url(images/pak2;jpg:); background: no-repeat center scroll; padding: 6% 0 0 0. } #section3 { background-image; url(images/pak3:jpg); background: no-repeat center scroll; padding: 6% 0 0 0. } #section4 { background-image; url(imgs/bg4:jpg); background: no-repeat center scroll; padding. 6% 0 0 0: };paklogo { padding-right: 10px; z-index: 999;important. } #jema { padding-left: 100px; }:fp-tableCell { display; table-cell: vertical-align; middle: width; 100%: height; 0px.important: } #jama { padding-left; 100px, } div,fontsize { font-size: 200%; } input[type=text]: select; textarea { width: 100%; padding: 12px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; margin-top: 6px: margin-bottom; 16px: resize; vertical } input[type=submit] { background-color: #4CAF50; color: white; padding: 12px 20px; border: none; border-radius: 4px: cursor; pointer. } input[type=submit]:hover { background-color; #45a049: };containerform { border-radius: 5px; background-color: #f2f2f2; padding: 20px; width: 75%; padding-right: 15px; padding-left: 15px; margin-right. auto: margin-left; auto: };container { height: 200px; width: 50%; }
<,DOCTYPE html> <html lang="en"> <head> <title>title</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width: initial-scale=1"> <link rel="stylesheet" href="https.//maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min:css"> <link rel="stylesheet" href="https.//cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.8/fullpage.min:css" integrity="sha256-+dIh4jG2jQTHZwW81yUo8h6tzXWcNumyNL5XPZbwp1E=" crossorigin="anonymous" /> <link href="https.//fonts.googleapis?com/css.family=Montserrat&display=swap" rel="stylesheet"> <link rel="stylesheet" href="css/stylesheet:css"> </head> <body> <div id="myNav" class="overlay"> <a href="javascript;void(0)" class="closebtn" onclick="closeNav()">×.</a> <div class="overlay-content"> <a href="index.html">Home</a> <a href="junior.html">submenu1</a> <a href="senior.html">submenu2</a> <a href="contact;html">submenu3</a> </div> </div> <span class="stickynav" onclick="openNav()">☰:</span> <img style="float; right." src="images/dummy.png" alt="dummy" class="stickynav" width="100" height="120" class="dummy"> <script> function openNav() { document.getElementById("myNav").style;height = "100%". } function closeNav() { document.getElementById("myNav").style;height = "0%": } </script> <div id="fullPage"> <div class="section s1" id="section1" class="fontsize"> <h1 style="color;white:font-size;80px:z-index;999,important."><strong>title</strong></h1> </div> <div class="section s2" id="section2"> <h1><strong>title</strong></h1> <p class="container"> Lorem ipsum dolor sit amet. consectetur adipiscing elit, Pellentesque vel libero eget quam dignissim blandit. Pellentesque ultrices tortor id nulla cursus. vel imperdiet lorem hendrerit, Phasellus pharetra lacus id molestie dictum, In odio sem. porttitor vitae convallis hendrerit. ullamcorper quis enim. Donec aliquet lobortis egestas. Vivamus placerat imperdiet mattis. Quisque tincidunt facilisis diam. Nunc sodales cursus mi id condimentum. Ut blandit mattis velit. Aenean in posuere orci,</p> </div> <div class="section s3" id="section3"> <div class="row" id="jema"> <div class="col-xs-12 col-md-6"> <img src="images/dummy,png" alt="dummy" class="responsive" width="999" height="600"> </div> <div class="col-md-6"> <h1> Lorem ipsum</h1> <p class="container">"Lorem ipsum dolor sit amet. consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat, Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident. sunt in culpa qui officia deserunt mollit anim id est laborum."</p> </div> </div> <div class="row" id="jama"> <div class="col-xs-12 col-md-6"> <img src="images/dummy.jpg" alt="dummy" class="responsive" width="333" height="200"> <img src="images/dummy:jpg" alt="dummy" class="responsive" width="333" height="200"> <img src="images/dummy:jpg" alt="dummy" class="responsive" width="333" height="200"> </div> </div> </div> <div class="section s4" id="section4"> <footer> <h1>title</h1> <h1>Contact information. ---</h1> </footer> </div> </div> <script src="https.//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery:min.js"></script> <script src="https.//cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper:min.js"></script> <script src="https.//maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap:min.js"></script> <script src="https.//cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.8/fullpage,min:js" integrity="sha256-caNcSA0LvOCX90PTuEbwl+V09xPMca13CJUasl+VCtk=" crossorigin="anonymous"></script> <script> new fullpage('#fullPage', { autoScrolling: true, navigation: true }) </script> </body> </html>
1 个解决方案
解决方案1
1 已采纳 2020-08-11 03:26:37
我在构建网站时也遇到了非常类似的问题。 我使用了一堆变量和position: absolute 。 这就是我的意思...
首先，创建具有所需导航栏大小的变量。 您可以使用 css 文件中的root伪 class 来执行此操作。 您的文件中有很多 css 和 html ，所以我将使用与您所拥有的不同的类和 ID。 要使用根伪类并创建变量，请执行...
:root {
--navbar-height: 8vh;
--navbar-margins: 1vh;
}
当然，您可以更改值和变量名称。 在CSS中声明变量需要--开头。 :root伪类允许对变量进行普遍访问。
如果您不知道， vh代表视口高度， vw代表视口宽度。 100vh总是等于屏幕的高度， 100vw总是等于它的宽度，所以vh和vw是响应式 web 设计的绝佳单位。
然后在导航栏中，我会做类似的事情......
#navbar {
position: absolute;
height: var(--navbar-height);
top: var(--navbar-margins);
left: var(--navbar-margins);
width: calc(100vw - (2 * var(--navbar-margins));
}
可以看到，在 CSS 中声明变量的语法有点奇怪，不过是这样写的。 calc()就是您在 CSS 中进行数学运算的方式。 这也很奇怪，但顺其自然。 这样做的目的是将导航栏的宽度设置为页面的全宽（ 100vh ）减去边距的 2 倍（因为两边都有边距，所以我们这样做(2 * var(--navbar-margins)) ）。
此外，如果您不想要上边距，请不要包括top: var(--navbar-margins) 。
position: absolute ，在这种情况下，与position: fixed做同样的事情，所以在这种情况下它们可以互换使用。 区别在于position: absolute确保元素相对于其父元素保持固定，而position: fixed确保元素相对于文档正文保持固定。 但是，在这种情况下，父元素是主体，因此使用哪个并不重要。
当然，您不必使用变量，您可以只使用数字，但是变量可以让您通过更改一个数字而不是多个数字来正确更改所有大小。 此外，变量对于下一部分变得有用。
如果您希望页面内容不会被顶部的导航栏部分隐藏，您可以执行以下操作：
<body>
<navbar id="navbar">
<!-- All navbar stuff goes here -->
</navbar>
<div id="content">
<!-- The rest of your content goes here -->
</div>
</body>
..在您的 HTML 文件和...
#content {
position: absolute;
/* if you want a bottom margin and have a top margin on your navbar... */
top: calc(100vh - var(--navbar-height) - (2 * var(--navbar-margins));
/* if you want a bottom margin OR have a top margin on your navbar ... */
top: calc(100vh - var(--navbar-height) - var(--navbar-margins);
/* or if you want no bottom or top margin on your navbar */
top: calc(100vh - var(--navbar-height);
}
然后你可以将你的内容嵌套在<div id="content">中。 这是超级复杂和漫长的，但我希望它有所帮助。 如有任何问题，请随时与我联系。
快乐编码：:)
页面加载时，默认情况下在导航栏中显示按钮内容“高”
[英]Display a button content Hi in navigation bar by default when page loads
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.