导航栏、正文和页脚的滚动问题
Posted
技术标签:
【中文标题】导航栏、正文和页脚的滚动问题【英文标题】：Scrolling issues with the navigation bar, body, and footer 【发布时间】：2021-01-01 16:32:47 【问题描述】：问题
在使用 Bootstrap 4 时，我的导航栏、正文和页脚出现滚动问题。在桌面视口上似乎一切正常。问题出在我缩小视口时。当 body 位于导航栏和页脚之间时，body 不会向下滚动，并且无法滚动
我也不确定为什么我的导航栏中会出现以下代码：
<div style="padding-block-end: 200px;">
> navbar
</div>
我的内容的开头部分也被导航栏隐藏了。
:root
--navbar-bg-color: hsl(0, 0%, 15%);
--navbar-text-color: hsl(0, 0%, 85%);
--navbar-text-color-focus: white;
--navbar-bg-contrast: hsl(0, 0%, 25%);
*
box-sizing: border-box;
margin: 0;
padding: 0;
body
height: 100vh;
font-family: Arial, Helvetica, sans-serif;
line-height: 1.6;
.container
max-width: 1000px;
padding-left: 1.4rem;
padding-right: 1.4rem;
margin-left: auto;
margin-right: auto;
#navbar
--navbar-height: 64px;
position: fixed;
height: var(--navbar-height);
background-color: var(--navbar-bg-color);
left: 0;
right: 0;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
.navbar-container
display: flex;
justify-content: space-between;
height: 100%;
align-items: center;
.navbar-item
margin: 0.4em;
width: 100%;
.home-link,
.navbar-link
color: var(--navbar-text-color);
transition: color 0.2s ease-in-out;
text-decoration: none;
display: flex;
font-weight: 400;
align-items: center;
transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
.home-link:focus,
.home-link:hover
color: var(--navbar-text-color-focus);
.navbar-link
justify-content: center;
width: 100%;
padding: 0.4em 0.8em;
border-radius: 5px;
.navbar-link:focus,
.navbar-link:hover
color: var(--navbar-text-color-focus);
background-color: var(--navbar-bg-contrast);
.navbar-logo
background-color: var(--navbar-text-color-focus);
border-radius: 50%;
width: 30px;
height: 30px;
margin-right: 0.5em;
.navbar-toggle
cursor: pointer;
border: none;
background-color: transparent;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
.icon-bar
display: block;
width: 25px;
height: 4px;
margin: 2px;
transition: background-color 0.2s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
background-color: var(--navbar-text-color);
.navbar-toggle:focus .icon-bar,
.navbar-toggle:hover .icon-bar
background-color: var(--navbar-text-color-focus);
#navbar.opened .navbar-toggle .icon-bar:first-child,
#navbar.opened .navbar-toggle .icon-bar:last-child
position: absolute;
margin: 0;
width: 30px;
#navbar.opened .navbar-toggle .icon-bar:first-child
transform: rotate(45deg);
#navbar.opened .navbar-toggle .icon-bar:nth-child(2)
opacity: 0;
#navbar.opened .navbar-toggle .icon-bar:last-child
transform: rotate(-45deg);
.navbar-menu
position: fixed;
top: var(--navbar-height);
bottom: 0;
transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
opacity: 0;
visibility: hidden;
left: 0;
right: 0;
#navbar.opened .navbar-menu
background-color: rgba(0, 0, 0, 0.4);
opacity: 1;
visibility: visible;
.navbar-links
list-style-type: none;
max-height: 0;
overflow: hidden;
position: absolute;
background-color: var(--navbar-bg-color);
display: flex;
flex-direction: column;
align-items: center;
left: 0;
right: 0;
margin: 1.4rem;
border-radius: 5px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
#navbar.opened .navbar-links
padding: 1em;
max-height: none;
@media screen and (min-width: 700px)
.navbar-toggle
display: none;
#navbar .navbar-menu,
#navbar.opened .navbar-menu
visibility: visible;
opacity: 1;
position: static;
display: block;
height: 100%;
#navbar .navbar-links,
#navbar.opened .navbar-links
margin: 0;
padding: 0;
box-shadow: none;
position: static;
flex-direction: row;
list-style-type: none;
max-height: max-content;
width: 100%;
height: 100%;
#navbar .navbar-link:last-child
margin-right: 0;
@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
body
background: rgb(30, 30, 40);
text-align: -webkit-center;
background-image: url("/public/img/5a2c61199c0fa1.0890734315128578816392.png");
background-repeat: no-repeat;
background-position: center;
form
max-width: 500px;
.feedback-input
color: white;
font-family: Helvetica, Arial, sans-serif;
font-weight: 500;
font-size: 18px;
border-radius: 5px;
line-height: 22px;
background: rgb(30, 30, 40);
// background:transparent;
border: 2px solid #7dabdb;
transition: all 0.3s;
padding: 13px;
margin-bottom: 15px;
width: 100%;
box-sizing: border-box;
outline: 0;
.feedback-input:focus
border: 2px solid #7dabdb;
textarea
height: 150px;
line-height: 150%;
resize: vertical;
[type="submit"]
font-family: 'Montserrat', Arial, Helvetica, sans-serif;
width: 100%;
background: #7dabdb;
border-radius: 5px;
border: 0;
cursor: pointer;
color: white;
font-size: 24px;
padding-top: 10px;
padding-bottom: 10px;
transition: all 0.3s;
margin-top: -4px;
font-weight: 700;
[type="submit"]:hover
background: #7dabdb;
*
margin: 0px;
padding: 0px;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
.footer
background: linear-gradient(hsl(0, 0%, 15%), hsl(0, 0%, 15%)), url("http://andreeabunget.co.uk/Img/footer.jpg");
background-size: cover;
bottom: 0;
width: 100%;
position: absolute;
.second2
margin-top: 40px;
margin-bottom: 50px;
font-family: 'Poppins', sans-serif;
text-align: center;
.second h4
font-size: 20px;
letter-spacing: 3px;
position: relative;
margin-bottom: 20px;
font-size: 1.6em;
color: #fff;
padding-bottom: 0.5em;
.second h4::after
content: '';
background: #66c83d;
width: 20%;
height: 2px;
position: absolute;
bottom: 0;
left: 40%;
.second li
list-style: none;
padding-bottom: 30px;
.second a,
.second2 a
color: rgb(206, 206, 206);
text-decoration: none;
letter-spacing: 3px;
font-weight: bold;
font-size: 14px;
transition: 0.2s;
.second a:hover,
.second2 a:hover
color: #fff;
transition: 0.2s;
text-shadow: 1px 1px 20px rgb(50, 129, 175);
text-decoration: none
.third
margin-top: 40px;
margin-bottom: 50px;
color: rgb(206, 206, 206);
font-family: 'Poppins', sans-serif;
text-align: right;
@media screen and (max-width:1000px)
.first
text-align: center;
.first h4::after
left: 40%;
@media screen and (max-width:1000px)
.third
text-align: center;
.third h4::after
left: 40% !important;
.margin
margin-left: 20px;
.container h1
text-align: center;
margin-top: 100px;
margin-bottom: 100px;
<!-- Font Awesome -->
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<!-- Navigation Bar -->
<header id="navbar">
<nav class="navbar-container container navbar-default navbar-fixed-top">
<a href="/" class="home-link">
<div class="navbar-logo"></div>
</a>
<button type="button" class="navbar-toggle" aria-label="Open navigation menu">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-menu">
<ul class="navbar-links">
<li class="navbar-item"><a class="navbar-link" href="/">home</a></li>
<li class="navbar-item"><a class="navbar-link" href="/">...</a></li>
<li class="navbar-item"><a class="navbar-link" href="/">...</a></li>
<li class="navbar-item"><a class="navbar-link" href="/">...</a></li>
</ul>
</div>
</nav>
</header>
<!-- Main Body -->
<div class="container form-group">
<form method="POST" enctype="multipart/form-data" action="sendmail">
<input name="name" type="text" class="feedback-input" placeholder="Name" required="required" />
<input name="email" type="text" class="feedback-input" placeholder="Email" required="required" />
<textarea name="text" class="feedback-input" placeholder="Message" required="required"></textarea>
<input type="submit" action="sendmail" />
</form>
</div>
<!-- Footer -->
<div class="footer">
<div class="container">
<div class="container">
<div class="row">
<div class="col-12">
<div class="line"></div>
<div class="second2">
<a href="https://codepen.io/AndreeaBunget" target="_blank"> <i class="fab fa-codepen fa-2x margin"></i></a>
<a href="" target="_blank"> <i class="fab fa-github fa-2x margin"></i></a>
<a href="" target="_blank"> <i class="fab fa-linkedin fa-2x margin"></i></a>
<a href="https://www.youtube.com/channel/UCX674BUbomzBCakbb75lhfA?view_as=subscriber" target="_blank"><i class="fab fa-youtube fa-2x margin"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>【问题讨论】：
【参考方案1】：我认为这是因为form 的高度小于屏幕的高度。
您可以添加min-height: 100vh; 以确保内容始终可见。
此外，您可以使用 flexbox 将元素设置在您想要的任何位置。开发更容易、更快捷。
这是您的代码，经过一些修改：
*
margin: 0px;
padding: 0px;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
:root
--navbar-bg-color: hsl(0, 0%, 15%);
--navbar-text-color: hsl(0, 0%, 85%);
--navbar-text-color-focus: white;
--navbar-bg-contrast: hsl(0, 0%, 25%);
body
background: rgb(30, 30, 40);
text-align: -webkit-center;
background-image: url("/public/img/5a2c61199c0fa1.0890734315128578816392.png");
background-repeat: no-repeat;
background-position: center;
.container
max-width: 1000px;
padding-left: 1.4rem;
padding-right: 1.4rem;
margin-left: auto;
margin-right: auto;
margin-top: 60px;
/* Navbar Style */
#navbar
--navbar-height: 64px;
position: fixed;
height: var(--navbar-height);
background-color: var(--navbar-bg-color);
left: 0;
top: 0;
right: 0;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
padding: 0 40px;
.navbar-container
display: flex;
justify-content: space-between;
height: 100%;
align-items: center;
.navbar-item
margin: 0.4em;
width: 100%;
.home-link,
.navbar-link
color: var(--navbar-text-color);
text-decoration: none;
display: flex;
font-weight: 400;
align-items: center;
transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
.home-link:focus,
.home-link:hover
color: var(--navbar-text-color-focus);
.navbar-link
justify-content: center;
width: 100%;
padding: 0.4em 0.8em;
border-radius: 5px;
.navbar-link:focus,
.navbar-link:hover
color: var(--navbar-text-color-focus);
background-color: var(--navbar-bg-contrast);
.navbar-logo
background-color: var(--navbar-text-color-focus);
border-radius: 50%;
width: 30px;
height: 30px;
margin-right: 0.5em;
.navbar-toggle
cursor: pointer;
border: none;
background-color: transparent;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
.icon-bar
display: block;
width: 25px;
height: 4px;
margin: 2px;
transition: background-color 0.2s ease-in-out, transform 0.2s ease-in-out,
opacity 0.2s ease-in-out;
background-color: var(--navbar-text-color);
.navbar-toggle:focus .icon-bar,
.navbar-toggle:hover .icon-bar
background-color: var(--navbar-text-color-focus);
#navbar.opened .navbar-toggle .icon-bar:first-child,
#navbar.opened .navbar-toggle .icon-bar:last-child
position: absolute;
margin: 0;
width: 30px;
#navbar.opened .navbar-toggle .icon-bar:first-child
transform: rotate(45deg);
#navbar.opened .navbar-toggle .icon-bar:nth-child(2)
opacity: 0;
#navbar.opened .navbar-toggle .icon-bar:last-child
transform: rotate(-45deg);
.navbar-menu
position: fixed;
top: var(--navbar-height);
bottom: 0;
transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
opacity: 0;
visibility: hidden;
left: 0;
right: 0;
#navbar.opened .navbar-menu
background-color: rgba(0, 0, 0, 0.4);
opacity: 1;
visibility: visible;
.navbar-links
list-style-type: none;
max-height: 0;
overflow: hidden;
position: absolute;
background-color: var(--navbar-bg-color);
display: flex;
flex-direction: column;
align-items: center;
left: 0;
right: 0;
margin: 1.4rem;
border-radius: 5px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
#navbar.opened .navbar-links
padding: 1em;
max-height: none;
@media screen and (min-width: 700px)
.navbar-toggle
display: none;
#navbar .navbar-menu,
#navbar.opened .navbar-menu
visibility: visible;
opacity: 1;
position: static;
display: block;
height: 100%;
#navbar .navbar-links,
#navbar.opened .navbar-links
margin: 0;
padding: 0;
box-shadow: none;
position: static;
flex-direction: row;
list-style-type: none;
max-height: max-content;
width: 100%;
height: 100%;
#navbar .navbar-link:last-child
margin-right: 0;
/* Content Style */
.content
margin-top:100px;
min-height: 100vh; /* To make the user able to see the content */
.content h1
text-align: center;
margin-top: 100px;
margin-bottom: 100px;
form
max-width: 500px;
.feedback-input
color: white;
font-family: Helvetica, Arial, sans-serif;
font-weight: 500;
font-size: 18px;
border-radius: 5px;
line-height: 22px;
background: rgb(30, 30, 40);
border: 2px solid #7dabdb;
transition: all 0.3s;
padding: 13px;
margin-bottom: 15px;
width: 100%;
box-sizing: border-box;
outline: 0;
.feedback-input:focus
border: 2px solid #7dabdb;
textarea
height: 150px;
line-height: 150%;
resize: vertical;
[type="submit"]
font-family: "Montserrat", Arial, Helvetica, sans-serif;
width: 100%;
background: #7dabdb;
border-radius: 5px;
border: 0;
cursor: pointer;
color: white;
font-size: 24px;
padding-top: 10px;
padding-bottom: 10px;
transition: all 0.3s;
margin-top: -4px;
font-weight: 700;
[type="submit"]:hover
background: #7dabdb;
/* Footer Styles */
.footer
background: linear-gradient(hsl(0, 0%, 15%), hsl(0, 0%, 15%)),
url("http://andreeabunget.co.uk/Img/footer.jpg");
background-size: cover;
width: 100%;
margin:20px 0 0;
padding:20px;
position:fixed;
bottom:0;
.second2
margin-top: 40px;
margin-bottom: 50px;
font-family: "Poppins", sans-serif;
text-align: center;
.second h4
letter-spacing: 3px;
position: relative;
margin-bottom: 20px;
font-size: 1.6em;
color: #fff;
padding-bottom: 0.5em;
.second h4::after
content: "";
background: #66c83d;
width: 20%;
height: 2px;
position: absolute;
bottom: 0;
left: 40%;
.second li
list-style: none;
padding-bottom: 30px;
.second a, .second2 a
color: rgb(206, 206, 206);
text-decoration: none;
letter-spacing: 3px;
font-weight: bold;
font-size: 14px;
transition: 0.2s;
.second a:hover, .second2 a:hover
color: #fff;
transition: 0.2s;
text-shadow: 1px 1px 20px rgb(50, 129, 175);
text-decoration: none;
.third
margin-top: 40px;
margin-bottom: 50px;
color: rgb(206, 206, 206);
font-family: "Poppins", sans-serif;
text-align: right;
.margin
margin-left: 20px;
@media screen and (max-width: 1000px)
.first
text-align: center;
.first h4::after
left: 40%;
@media screen and (max-width: 1000px)
.third
text-align: center;
.third h4::after
left: 40% !important;
这里是 html 代码：
<!-- Navbar -->
<header id="navbar">
<nav class="navbar-container navbar-default navbar-fixed-top">
<a href="/" class="home-link">
<div class="navbar-logo"></div>
Brand
</a>
<button type="button" class="navbar-toggle" aria-label="Open navigation menu">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-menu">
<ul class="navbar-links">
<li class="navbar-item"><a class="navbar-link" href="/">home</a></li>
<li class="navbar-item"><a class="navbar-link" href="/">About</a></li>
<li class="navbar-item"><a class="navbar-link" href="/">Contact</a></li>
<li class="navbar-item"><a class="navbar-link" href="/">Login</a></li>
</ul>
</div>
</nav>
</header>
<!-- Content -->
<div class="container form-group content">
<form method="POST" enctype="multipart/form-data" action="sendmail">
<input name="name" type="text" class="feedback-input" placeholder="Name" required="required" />
<input name="email" type="text" class="feedback-input" placeholder="Email" required="required" />
<textarea name="text" class="feedback-input" placeholder="Message" required="required"></textarea>
<input type="submit" action="sendmail" />
</form>
</div>
<!-- footer -->
<div class="footer">
<div class="container">
<div class="container">
<div class="row">
<div class="col-12">
<div class="line"></div>
<div class="second2">
<a href="" target="_blank"> <i class="fab fa-github fa-2x margin"></i></a>
<a href="" target="_blank"> <i class="fab fa-linkedin fa-2x margin"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Font Awesome -->
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
这也是Codepen 上的代码。
【讨论】：
你解决了我的问题，非常感谢你花时间纠正我！！ 谢谢，Sameh，Flexbox 太棒了。以上是关于导航栏、正文和页脚的滚动问题的主要内容，如果未能解决你的问题，请参考以下文章
HTML5开发移动web应用—JQuery Mobile-导航栏和页脚