所以我刚开始制作网站，网站底部有很多空白区域...
我一直在删除 div 但在 Inspect Element 上显示空白是因为 <ul></ul>当我删除该标签时，它显示这是因为 <body>
他们说添加margin: 0; padding:0 html,body { height:100%;}但没有任何效果。
@font-face {
font-family: 'RobotoR';
src: url("/Roboto-Regular.ttf");
}
@font-face {
font-family: 'RobotoM';
src: url("/Roboto-Medium.ttf");
}
@font-face {
font-family: 'RobotoB';
src: url("/Roboto-Bold.ttf");
}
@font-face {
font-family: 'RobotoLi';
src: url("/Roboto-LightItalic.ttf");
}
html,body {height:100%;}
body{
overflow-x: hidden;
min-height: 100vh;
margin:0;
}
.navigacija a{
font-size: 21px;
font-family: 'RobotoR', sans-serif;
text-decoration: none;
z-index: 1;
}
nav ul li a {
color: black;
background-color: inherit;
padding: 0.5em 0.5em;
}
.navigacija a:hover {
color:#202020;
font-weight: bold;
}
.navigacija a:visited{
color: #202020;
font-weight: bold;
}
nav ul {
position: relative;
width: auto;
background: none;
height: auto;
bottom: 10em;
right: 5em;
display: flex;
float: right;
list-style-type: none;
z-index: 1;
}
.logo{
position: relative;
width: 20%;
left: 5.1em;
top: -2.5em;
}
.kontakttelmail {
position: relative;
top: -11.5em;
left: 83.9em;
font-family: 'RobotoLi', sans-serif;
word-spacing: 1em;
font-size: 15px;
opacity: 0.5;
}
.button {
background-color: white;
border: none;
color: #00A651;
padding: 20px 30px;
position: relative;
bottom: 85em;
left: 57.5em;
text-align: center;
border-radius: 35px;
text-decoration: none;
display: inline-block;
font-size: 21px;
font-family: 'RobotoB', sans-serif;
}
.zelenakrivina{
position: relative;
width: 90%;
right: -15em;
bottom: 8em;
padding: 0%;
margin: 0%;
}
.auto{
position: relative;
width: 49%;
right: -24.5em;
bottom: 44em;
padding: 0%;
margin: 0%;
}
.zelenisvg ul li{
position: relative;
bottom: 95em;
left: 80em;
text-decoration: none;
list-style-type: none;
}
.zelenisvg {
}
.Renault{
position: relative;
top: -0em;
right: 0.1em;
color: white;
font-size: 30px;
font-family: 'RobotoM', sans-serif;
padding: 0%;
margin: 0%;
}
.Megane{
position: relative;
top: -1.3em;
right: 1.1em;
color: white;
font-size: 40px;
font-family: 'RobotoB', sans-serif;
}
.lajna{
position: relative;
bottom: 124em;
left: 63.7em;
width: 11%;
}
.a30e{
position: relative;
top: -1.58em;
right: 0.7em;
color: white;
font-size: 100px;
font-family: 'RobotoB', sans-serif;
}
.nadan{
position: relative;
top: -11em;
right: -0.6em;
color: white;
font-size: 25px;
font-family: 'RobotoR', sans-serif;
}
.sivitext{
position: relative;
bottom: 22em;
font-family: 'RobotoB', sans-serif;
font-size: 60px;
left: 2.5em;
color: #212121;
}
.zelenitext{
position: relative;
bottom: 23.2em;
font-family: 'RobotoB', sans-serif;
font-size: 60px;
left: 2.5em;
color: #00A651;
}
.ispodnaslova{
position: relative;
bottom: 61.2em;
font-family: 'RobotoR', sans-serif;
font-size: 23.8px;
left: 6.3em;
color: #585858;
}
.scroll{
position: relative;
bottom: 110.9em;
/* left: 15em; */
width: 8%;
display: block;
margin-left: auto;
margin-right: auto;
}
.strelica{
position: relative;
bottom: 115.9em;
/* left: 15em; */
width: 4.2%;
display: block;
margin-left: auto;
margin-right: auto;
}<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>S T A R T - Rent-a-Car</title>
<link rel = "stylesheet"
type = "text/css"
href = "style.css" />
</head>
<header>
<img src="images/logo.png" alt="logo" class="logo">
<nav>
<ul class="navigacija" id="nav">
<li><a href="index.html">Početna</a></li>
<li><a href="#">Sva vozila</a></li>
<li><a href="#">O nama</a></li>
<li><a href="#">Kontkat</a></li>
</ul>
</nav>
<p class="kontakttelmail">email@gmail.com +382-68-222-333</p>
</header>
<body>
<div class="zelenisvg">
<img src="images/Path 1.svg" alt="zelenakrivina" class="zelenakrivina">
<img src="images/renault-migan-e1541771231987.svg" alt="renault" class="auto">
<p class="sivitext">Uz naša vozila ste</p>
<p class="zelenitext"> korak bliže cilju!</p>
<p class="ispodnaslova">Na vaš poziv dovodimo željeno<br>
vozilo na vašu adresu!</p>
<ul>
<li><p class="Renault">Renault</p></li>
<li><p class="Megane">Megane</p></li>
<li><p class="a30e">30€</p></li>
<li><p class="nadan">/na dan</p></li>
</ul>
<button onclick="location.href= 'Svavozila.html'" class="button">Rezervisi odmah!</button>
<img src="/images/Line 1.png" alt="linija" class="lajna">
<img src="images/Path 9.svg" alt="scroll" class="scroll">
<img src="/images/Path 2.png" alt="strelica" class="strelica">
</div>
</body>
<footer>
</footer>最佳答案
就像评论区有人说的:
</body>
<footer>
</footer>
页脚不能位于 body 元素之外。
看看这个链接: https://css-tricks.com/snippets/html/html5-page-structure/
您将了解 HTML 标记的外观:)
编辑:
您的 HTML 现在看起来好多了，但您的 CSS 正在破坏一切。为什么要将 position: relative 应用于您创建的每个 CSS 规则？看https://jsfiddle.net/t23mkxz4/
我已经删除了 position: relative 并且一切看起来都好多了。请 - 研究一下如何使用 position: relative 属性 :)
看看这个链接 -> https://developer.mozilla.org/en-US/docs/Web/CSS/position
它是知识和示例的重要来源。祝你好运!
关于html - 我的 HTML/CSS 网站末尾的空白，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59093000/