html - 如何删除内容和页脚之间的空白
问题描述
我有一个问题,我有这个网站,虽然它运行良好,而且我在网站底部有一个粘性页脚,但它在内容末尾之间有很多空间
我想删除空白
现在我将如何处理这个 html 在这里:
<html lang="en">
<head>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet">
<link href="styles.css" rel="stylesheet">
<link href="menu1.css" rel="stylesheet">
<link href="author.css" rel="stylesheet">
<!-- Social Media Icon Library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title></title>
</head>
<body>
<head>
<!--Navigation-->
<article class="top">
<div class="" id="line">
<img class="logo" src="logo.png" alt="logo">
<h1><span class="lines">D.P.P</span></h1>
</div>
<span class="lines">
<ul>
<li><a href="index.html" style="color: #cac0cc">Home</a></li>
<li><a href="book.html" style="color: #cac0cc">Nada menos que Max</a></li>
<li><a href="inspiration.html" style="color: #cac0cc">Inspiration</a></li>
<li><a href="contact.html" style="color: #cac0cc">Contact</a></li>
</ul>
<hr>
<hr>
</span>
<script src="menu.js"></script>
</article>
<div class="spacer"> </div>
</head>
<main id="content">
<table>
<tr>
<td id="main">
<h3> </h3>
<span>.</span>
</td>
<td id="img"><img id="Diana" src=""></td>
</tr>
</table>
</main>
</body>
<footer>
<hr>
<article>
<p>Connect</p>
显然,为此删除了个人信息并不重要。
我使用的 css 如下: author.css:
h3
{
text-align: center;
}
#main
{
width: 66%;
margin-right: 100px;
margin-left: 150px;
padding-left: 100px;
padding-right:5%;
}
#Diana
{
height: 50%;
}
#img
{
width: 33%;
margin-right: 40px;
}
导航栏和顶部的 Menu.css:
ul
{
width:100%;
list-style: None;
margin: 0;
padding: 0;
top: 0;
background-color: #7d8a96;
}
li
{
width:25%;
float:left;
border-right: none;
}
li:last-child
{
border-right:none;
}
li a
{
display: block;
width:100%;
background:#f9f7fa;
padding:4% 10%;
font-size:1em;
text-decoration: none;
}
@media screen and (max-width: 768px) {
#menu
{
width:1.4em;
display: block;
background:#ddd;
font-size:1.35em;
text-align: center;
}
#nav.js
{
display: none;
}
ul
{
width:100%;
list-style:none;
}
li
{
width:100%;
border-right:none;
}
}
@media screen and (min-width: 768px)
{
#menu
{
display: none;
}
}
/*Lines on sides*/
.lines
{
line-height: 0.5;
text-align: center;
}
.lines span
{
display: inline-block;
position: relative;
}
.lines span:before,
.lines span:after
{
content: "";
position: absolute;
height: 5px;
border-bottom: 1px solid white;
border-top: 1px solid white;
top: 0;
width: 600px;
}
.lines span:before
{
right:100%;
margin-right: 15px;
}
lines span:after
{
left: 100%;
margin-left: 15px;
}
h1
{
margin-top: 50px;
font-size: 1rem;
font-style: oblique;
font-weight: thin;
color: #4e565e;
text-align: center;
font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
}
.top
{
width: 100%;
height: 100px;
padding: 10px;
}
.spacer
{
width: 100%;
height: 100px;
}
#content
{
margin-top: 50px;
width: 100%;
height: 100%;
padding: 10px;
}
.logo
{
display: block;
margin-left: auto;
margin-right: auto;
width: 5%;
margin-bottom: -50px;
}
和 style.css
*
{
margin: 0;
padding: 0;
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
}
footer
{
margin-top: 150px;
flex-shrink: 0;
text-align: center;
}
html, body
{
height: 100%;
}
body
{
display: flex;
flex-direction: column;
}
#content
{
min-height: calc(100vh - 70px);
height: auto !important;
height: 100%;
margin: 0 auto -142px;
flex: 1 0 auto;
}
我该怎么做
解决方案
也许您可以更改内容的最小高度,因为目前它设置为 100vh
改变
#content
{
min-height: calc(100vh - 70px);
}
至
#content
{
min-height:30vh;
}
推荐阅读
- javascript - 如何获取导出数组的值
- javascript - 需要帮助在外部 js 文件中定义我的变量
- angular - HTML 中的 Angular 函数调用
- python - 要列出的 Python 字符串?
- sql-server - Visual Basic - IIF 中的嵌套 IF 与 OrElse
- java - 替换字符串中的某个字符
- android - 我们如何在android Webview中检测哪个键盘是打开的,数字或字母数字?
- python - Python Flask 奇怪的日志记录行为(kubernetes)
- django-rest-framework - Django rest框架:将成功或失败的请求记录到文本文件
- utf-8 - 所有权问题(不可变和可变借用的情况)