问题描述
我从 https://codepen.io/Serhii75/pen/OEQrgM
如果页面的内容太大，我需要使页脚始终可见，并添加滚动。
在CSS中，我进行了修改：
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 35px !important;
/* set fixed height of the footer */
background-color: #ccc;
}
.content-wrapper {
margin-left: 230px;
height: calc(100vh - (35px + 12px) );
/* calculated height without footer and padding */
overflow: auto;
}
它可以工作，但是我看到y轴滚动条增加了一倍。参见https://prnt.sc/u20wjb
我的完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div>
<nav class="navbar navbar-expand-lg navbar-dark fixed-top bg-dark">
<a class="navbar-brand" href="#">Sidebar Nav</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto sidenav" id="navAccordion">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 1</a>
</li>
<li class="nav-item">
<a class="nav-link nav-link-collapse" href="#" id="hasSubItems" data-toggle="collapse" data-target="#collapseSubItems2" aria-controls="collapseSubItems2" aria-expanded="false">Item 2</a>
<ul class="nav-second-level collapse" id="collapseSubItems2" data-parent="#navAccordion">
<li class="nav-item">
<a class="nav-link" href="#">
<span class="nav-link-text">Item 2.1</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span class="nav-link-text">Item 2.2</span>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 3</a>
</li>
<li class="nav-item">
<a class="nav-link nav-link-collapse" href="#" id="hasSubItems" data-toggle="collapse" data-target="#collapseSubItems4" aria-controls="collapseSubItems4" aria-expanded="false">Item 4</a>
<ul class="nav-second-level collapse" id="collapseSubItems4" data-parent="#navAccordion">
<li class="nav-item">
<a class="nav-link" href="#">
<span class="nav-link-text">Item 4.1</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span class="nav-link-text">Item 4.2</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span class="nav-link-text">Item 4.2</span>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 5</a>
</li>
</ul>
<form class="form-inline ml-auto mt-2 mt-md-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<main class="content-wrapper">
<div class="container-fluid">
<h1>Main Content</h1>
Content
<br /><br /> Emulates height 100% with a horizontal flexBox with stretch
<br /><br /> This Box with a border should fill the blue area except for the padding (just to show the middle flexBox item).
<p>Lorem <strong>ipsum dolor sit</strong> amet,consectetur adipiscing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis <strong>nostrud exercitation</strong> 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>
...
<p>Lorem ipsum dolor sit amet,<strong>consectetur adipiscing elit</strong>,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. <i>Excepteur sint occaecat</i> cupidatat non proident,sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>Lorem ipsum dolor sit amet,sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</main>
<footer class="footer">
<div class="container">
<div class="text-center">
<span>Coded by <a href="https://si-dev.com/ru">SI-Dev</a>,2018</span>
</div>
</div>
</footer>
</div>
<link href="/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<script src="/js/jquery-3.5.1.min.js"></script>
<script src="/js/bootstrap.js"></script>
<style>
html {
position: relative;
min-height: 100%;
}
body {
padding-top: 4.5rem;
margin-bottom: 4.5rem;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 35px !important;
/*height: 3.5rem;*/
/*line-height: 3.5rem;*/
background-color: #ccc;
}
.nav-link:hover {
transition: all 0.4s;
}
.nav-link-collapse:after {
float: right;
content: '\f067';
font-family: 'FontAwesome';
}
.nav-link-show:after {
float: right;
content: '\f068';
font-family: 'FontAwesome';
}
.nav-item ul.nav-second-level {
padding-left: 0;
}
.nav-item ul.nav-second-level>.nav-item {
padding-left: 20px;
}
@media (min-width: 992px) {
.sidenav {
position: absolute;
top: 0;
left: 0;
width: 230px;
height: calc(100vh - 3.5rem);
margin-top: 3.5rem;
background: #343a40;
Box-sizing: border-Box;
border-top: 1px solid rgba(0,0.3);
}
.navbar-expand-lg .sidenav {
flex-direction: column;
}
.content-wrapper {
margin-left: 230px;
height: calc(100vh - (35px + 12px));
/* Set max height */
overflow: auto;
}
.footer {
width: calc(100% - 230px);
margin-left: 230px;
height: 35px !important;
}
}
</style>
<script>
$(document).ready(function() {
$('.nav-link-collapse').on('click',function() {
$('.nav-link-collapse').not(this).removeClass('nav-link-show');
$(this).toggleClass('nav-link-show');
});
});
</script>
</body>
</html>如何修复翻倍的y轴滚动条？我只在1个滚动条之后，用于内容。
解决方法
看起来body元素上有一些空白，这在页脚和内容之间造成了额外的空间。我建议删除它，然后对您的内容进行一些高度调整，然后身体滚动条应该消失。
最后，我还建议在内容底部添加一些填充以适应绝对定位的页脚。
body {
padding-top: 4.5rem;
/* margin-bottom: 4.5rem; */
/* remove the margin */
}
.content-wrapper {
margin-left: 230px;
/* subtrahend in this equation should be based off of header & footer box model height summation */
height: calc(100vh - (35px + 45px));
overflow: auto;
/* add some padding to cater the absolute footer */
padding-bottom: 35px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<nav class="navbar navbar-expand-lg navbar-dark fixed-top bg-dark">
<a class="navbar-brand" href="#">Sidebar Nav</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto sidenav" id="navAccordion">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 1</a>
</li>
<li class="nav-item">
<a class="nav-link nav-link-collapse" href="#" id="hasSubItems" data-toggle="collapse" data-target="#collapseSubItems2" aria-controls="collapseSubItems2" aria-expanded="false">Item 2</a>
<ul class="nav-second-level collapse" id="collapseSubItems2" data-parent="#navAccordion">
<li class="nav-item">
<a class="nav-link" href="#">
<span class="nav-link-text">Item 2.1</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span class="nav-link-text">Item 2.2</span>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 3</a>
</li>
<li class="nav-item">
<a class="nav-link nav-link-collapse" href="#" id="hasSubItems" data-toggle="collapse" data-target="#collapseSubItems4" aria-controls="collapseSubItems4" aria-expanded="false">Item 4</a>
<ul class="nav-second-level collapse" id="collapseSubItems4" data-parent="#navAccordion">
<li class="nav-item">
<a class="nav-link" href="#">
<span class="nav-link-text">Item 4.1</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span class="nav-link-text">Item 4.2</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span class="nav-link-text">Item 4.2</span>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 5</a>
</li>
</ul>
<form class="form-inline ml-auto mt-2 mt-md-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<main class="content-wrapper">
<div class="container-fluid">
<h1>Main Content</h1>
Content
<br /><br /> Emulates height 100% with a horizontal flexbox with stretch
<br /><br /> This box with a border should fill the blue area except for the padding (just to show the middle flexbox item).
<p>Lorem <strong>ipsum dolor sit</strong> amet,consectetur adipiscing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis <strong>nostrud exercitation</strong> 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>
...
<p>Lorem ipsum dolor sit amet,<strong>consectetur adipiscing elit</strong>,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. <i>Excepteur sint occaecat</i> cupidatat non proident,sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>Lorem ipsum dolor sit amet,sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</main>
<footer class="footer">
<div class="container">
<div class="text-center">
<span>Coded by <a href="https://si-dev.com/ru">SI-Dev</a>,2018</span>
</div>
</div>
</footer>
</div>
<link href="/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<script src="/js/jquery-3.5.1.min.js"></script>
<script src="/js/bootstrap.js"></script>
<style>
html {
position: relative;
min-height: 100%;
}
body {
padding-top: 4.5rem;
/*margin-bottom: 4.5rem;*/
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 35px !important;
/*height: 3.5rem;*/
/*line-height: 3.5rem;*/
background-color: #ccc;
}
.nav-link:hover {
transition: all 0.4s;
}
.nav-link-collapse:after {
float: right;
content: '\f067';
font-family: 'FontAwesome';
}
.nav-link-show:after {
float: right;
content: '\f068';
font-family: 'FontAwesome';
}
.nav-item ul.nav-second-level {
padding-left: 0;
}
.nav-item ul.nav-second-level>.nav-item {
padding-left: 20px;
}
@media (min-width: 992px) {
.sidenav {
position: absolute;
top: 0;
left: 0;
width: 230px;
height: calc(100vh - 3.5rem);
margin-top: 3.5rem;
background: #343a40;
box-sizing: border-box;
border-top: 1px solid rgba(0,0.3);
}
.navbar-expand-lg .sidenav {
flex-direction: column;
}
.content-wrapper {
margin-left: 230px;
height: calc(100vh - (35px + 37px));
/* Set max height */
overflow: auto;
padding-bottom: 35px;
}
.footer {
width: calc(100% - 230px);
margin-left: 230px;
height: 35px !important;
}
}
</style>
<script>
$(document).ready(function() {
$('.nav-link-collapse').on('click',function() {
$('.nav-link-collapse').not(this).removeClass('nav-link-show');
$(this).toggleClass('nav-link-show');
});
});
</script>
</body>
</html>