【发布时间】：2021-02-23 23:05:55
【问题描述】：
我无法摆脱页脚下的空白。如果您需要更多信息，请询问。这是我第一次使用 Stack Overflow。我尝试过更改填充和边距、更改位置以及更改页脚的高度。 margin: 0; 不起作用，padding: 0; 也不起作用。
这是一个 Image 显示正在发生的事情。
/*Import Open Sans*/
@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap')
:root {
font-size: 16px;
font-family: 'Open Sans', sans-serif;
--text-primary: #b6b6b6;
--text-secondary: #ececec;
--bg-primary: #23232e;
--bg-secondary: #141418;
}
main {
min-height: calc(100vh - 40px);
}
body::-webkit-scrollbar {
width: 0.25rem;
}
body::-webkit-scrollbar-track {
background: #333;
}
body::-webkit-scrollbar-thumb {
background: #141418;
}
#president {
border-right: 1px #333 solid;
}
#vicePresident {
border-right: 1px #333 solid;
}
footer {
position: relative;
left: 0;
bottom: 0;
height:100%;
width: 100%;
background-color: #333;
color: white;
margin-bottom: 0;
} <!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- Primary Meta Tags -->
<title>Cleveland Coding Club</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="title" content="Cleveland Coding Club">
<meta name="description" content="The official Cleveland Coding Club Website.">
<!-- Start Bootstrap -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<!-- End Bootstrap -->
<!-- Link Javascript Files -->
<script src="app.js"></script>
<script src="index.js"></script>
<!-- Link Main CSS File -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.php">CLEVELAND CODING CLUB</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li><a href="index.php">Home</a></li>
<li><a href="events.php">Events</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">About
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="about.php#adviser">Adviser</a></li>
<li><a href="about.php#leaders">Leaders</a></li>
</ul>
</li>
<li><a href="leadership.php">Leadership</a></li>
<li><a href="links.php">Social Media/Links</a></li>
<?php
if($_SESSION['username'] == 'admin') {
echo("<button class='btn btn-danger navbar-btn' onclick='goToWebmaster();'>Webmaster</button>");
}
?>
</ul>
<p class="navbar-text" id="version">Version: 0.3.2.2</p>
<ul class="nav navbar-nav navbar-right">
<p class="navbar-text">Welcome,
<?php
echo $_SESSION['username'] ;
?>
</p>
<?php
// If session username == Guest then show login button, also if username !isset.
if ($_SESSION['username'] == 'Guest') {
echo("<li><a href='login.php'><span class='glyphicon glyphicon-log-in'></span> Login</a></li>");
} elseif ($_SESSION['username'] != 'Guest') {
echo("<li><a href='logout.php'><span class='glyphicon glyphicon-log-out'></span> Logout</a></li>");
}
?>
</ul>
</div>
</div>
</nav>
<main>
<section id="adviser" class="text-center">
<div class="container-fluid">
<h1 class="h1">Adviser</h1>
<div class="row">
<div class="col-md-12">
<h1 class="h1">Random Name</h1>
<img src="img/advisors/Name.png" alt="Random Name" class="img-thumbnail rounded mx-auto d-block">
<h2 class="h2">About Me</h2>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam, a sequi asperiores! Saepe, reprehenderit, sequi, dignissimos praesentium quae culpa dicta est eligendi voluptatem esse animi minus assumenda ea corporis itaque.</p>
</div>
</div>
</div>
</section>
<hr/>
<section id="leaders" class="text-center">
<div class="container-fluid">
<h1 class="h1">Leaders</h1>
<div class="row">
<div class="col-md-4" id="president">
<h1 class="h1">President</h1>
<h2 class="h2">Random Name</h2>
<img src="img/leaders/Name.png" alt="Random Name" class="img-thumbnail rounded mx-auto d-block">
<h3 class="h3">About Me</h3>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium, provident, ipsum, architecto facere dolorem blanditiis quibusdam ad quisquam aperiam et voluptate obcaecati animi tempora illum repellat reprehenderit nulla at nostrum?</p>
</div>
<div class="col-md-4" id="vicePresident">
<h1 class="h1">Vice President</h1>
<h2 class="h2">Random Name</h2>
<img src="img/leaders/name.jpeg" alt="Sarah Clodfelter" class="img-thumbnail rounded mx-auto d-block">
<h3 class="h3">About Me</h3>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos, maxime, iste, repellendus animi architecto fugiat facilis voluptas iusto aperiam qui tenetur amet consequuntur ad placeat sint earum vel repellat. Facere.</p>
</div>
<div class="col-md-4" id="secretary">
<h1 class="h1">Secretary</h1>
<h2 class="h2">Random Name</h2>
<img src="img/sample.png" alt="sample-img" class="img-thumbnail rounded mx-auto d-block">
<h3 class="h3">About Me</h3>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni, architecto, natus totam explicabo est ducimus similique molestiae magnam aperiam aliquid dolor ipsam reprehenderit neque sequi ea voluptates consequuntur voluptatibus sit.</p>
</div>
</div>
</div>
</section>
</main>
<footer class="text-center">
<h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia reprehenderit deleniti quae ex provident quibusdam harum illum. At, eaque, animi aperiam officia deleniti voluptates et? Corporis, iusto eligendi minus vero.</h3>
</footer>
</body>
</html>【问题讨论】：
-
顺便说一句，如果你想要体面的 ios 体验，不要使用 100vh
标签： javascript html css footer