如何解决如何删除页脚下方的空白？
我很难摆脱页脚下的空白。如果您需要更多信息，请询问。这是我第一次使用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>解决方法
之所以发生这种情况，是因为页脚中的h3元素具有内置的边距，该边距超出了div的边界。在div中添加一些填充即可解决该问题。
footer {
background-color: #333;
color: white;
padding: 1px;
}
所有 Daily Digest for Failed Runs
------------------------------------------------------------------------------------
failed_runs
0 296e62fb-1bc2-4e27-8d69-4a2267237698 - FAILED-...
1 92b15078-1fcc-41f0-bc20-d933becf23bf - FAILED-...
2 b04460ef-32a7-403a-8fbe-468effed7f2b - FAILED-...
标签都带有空白。要删除它们，只需像这样使用<h>：
margin:0/*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;
},
我刚刚更改了高度-您可以对其进行编辑以适合您的需求，希望对您有所帮助。
/*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: 70vh;
width: 100%;
background-color: #333;
color: white;
} <!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>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。