我正在学习HTML，CSS。我已经在PC上建立了本地网站。但是我的页脚和内容之间有很大的空间。你们能看看代码并建议我该怎么做吗？我在哪里犯错。我已经尝试在边际内容中使用margin-top而不是bottom，但这也没有用。
* {
margin: 0;
padding: 0;
}
body {
background-color: skyblue;
height: 100%;
}
#container {
width: 100%;
}
#main {
overflow: auto;
}
#nav {
overflow: hidden;
background: darkblue;
position: relative;
top: 0;
width: 150% height: 80px;
line-height: 70px;
}
#nav ul {
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
}
#nav li {
display: inline;
vertical-align: middle;
padding: 100px;
vertical-align: middle;
}
#nav a {
text-decoration: none;
font-size: 150%;
padding-top: 50%;
padding: 105px;
color: white;
vertical-align: middle;
}
#nav a:hover {
background-color: white;
color: red;
}
#logo {
max-width: 5.7%;
height: auto;
float: left;
}
#mainimage {
display: block;
margin-left: auto;
margin-right: auto;
padding-top: 0px;
}
.caption {
display: block;
text-align: center;
font-size: 150%;
font-weight: bold;
}
h1 {
text-align: center;
padding-top: 20px;
padding-bottom: 0px;
}
h2 {
font-family: "Georgia";
}
#side-content {
height: 100%;
width: 350px;
float: right;
clear: both;
position: relative;
bottom: 880px;
overflow: hidden;
}
#mf {
width: 1000px;
}
#imag {
float: right;
position: relative;
top: 7px;
height: 300px;
width: 270px;
right: 18px;
padding-bottom: 20px;
}
.info {
position: relative;
bottom: 2em;
font-size: 90%;
text-align: center;
}
.th,
.info td {
vertical-align: top;
border: 0;
border-bottom: 1px solid #dddddd;
padding-bottom: 8 px;
}
#nutshell {
font-family: 'Lato'. sans-serif;
font-weight: bold;
font-size: 25px;
text-align: center;
}
footer {
left: 0;
bottom: 0;
text-align: center;
clear: both;
position: relative;
height: 100%;
}
#quote {
font-family: 'Pacifico', cursive;
text-align: center;
font-size: 25px;
background-color: #ececec;
}
.balance {
text-align: center;
float: left;
}<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Tribute To Swami Vivekanada</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="container">
<div id="main">
<div id="nav">
<ul>
<li><img id="logo" src="logo.jpg" alt="WebLogo" /></li>
<li><a id="trb" href="">Tribute Page</a></li>
<li><a id="Dwn" href="">Info</a></li>
</ul>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<h1> Swami Vivekananda</h1>
<figure class="item">
<img id="mainimage" src="swamiji.jpg">
<figcaption class="caption">(1863-1902)</figcaption>
</figure>
<h2>Here are some facts about Swami Vivekananda</h2>
<br>
<br>
<div id="mf">
<p class="firstd">1) Vivekananda was born Narendranath Datta (shortened to Narendra or Naren) in a Bengali family at his ancestral home at 3 Gourmohan Mukherjee Street in Calcutta, the capital of British India, on 12 January 1863 during the Makar Sankranti festival.</p>
<br>
<p class="general">2) He belonged to a traditional family and was one of nine siblings.His father, Vishwanath Datta, was an attorney at the Calcutta High Court.</p>
<br>
<p class="general">3) Narendranath was interested in spirituality from a young age and used to meditate before the images of deities such as Shiva, Rama, Sita, and Mahavir Hanuman.</p>
<br>
<p class="general">4) In 1871, at the age of eight, Narendranath enrolled at Ishwar Chandra Vidyasagar's Metropolitan Institution, where he went to school until his family moved to Raipur in 1877.</p>
<br>
<p class="general">5) He was an avid reader in a wide range of subjects, including philosophy, religion, history, social science, art and literature.He was also interested in Hindu scriptures, including the Vedas, the Upanishads, the Bhagavad Gita, the Ramayana,
the Mahabharata and the Puranas.</p>
<br>
<p class="general">6) Narendra studied the works of David Hume, Immanuel Kant, Johann Gottlieb Fichte, Baruch Spinoza, Georg W. F. Hegel, Arthur Schopenhauer, Auguste Comte, John Stuart Mill and Charles Darwin.</p>
<br>
<p class="general">7) In 1880 Narendra joined Keshab Chandra Sen's Nava Vidhan, which was established by Sen after meeting Ramakrishna and reconverting from Christianity to Hinduism.Narendra became a member of a Freemasonry lodge "at some point before 1884"</p>
<br>
<p class="general">8) In 1888, Narendra left the monastery as a Parivrâjaka— the Hindu religious life of a wandering monk, "without fixed abode, without ties, independent and strangers wherever they go".</p>
<br>
<p class="general">9) Narendra left Bombay for Chicago on 31 May 1893 with the name "Vivekananda", as suggested by Ajit Singh of Khetri, which means "the bliss of discerning wisdom," from Sanskrit viveka and ānanda.</p>
<br>
<p class="general">10) On 4 July 1902, According to his disciples, Vivekananda attained mahasamadhi, the rupture of a blood vessel in his brain was reported as a possible cause of death.</p>
</div>
<br>
<br>
<br>
<br>
<br>
<div class="Balance">
<h2>More Facts</h2>
<p>1) In 1880 Narendra joined Keshab Chandra Sen's Nava Vidhan, which was established by Sen after meeting Ramakrishna and reconverting from Christianity to Hinduism.</p>
<br>
<p>2) His initial beliefs were shaped by Brahmo concepts, which included belief in a formless God and the deprecation of idolatry,[24][46] and a "streamlined, rationalized,<br> monotheistic theology strongly coloured by a selective and modernistic
reading of the Upanisads and of the Vedanta.</p>
<br>
<p>3) Vivekananda attracted followers and admirers in the US and Europe, including Josephine MacLeod, William James, Josiah Royce, Robert G. Ingersoll, Nikola Tesla, Lord Kelvin,<br> Harriet Monroe, Ella Wheeler Wilcox, Sarah Bernhardt, Emma Calvé
and Hermann Ludwig Ferdinand von Helmholtz.</p>
<br>
<p>4) He initiated several followers : Marie Louise (a French woman) became Swami Abhayananda, and Leon Landsberg became Swami Kripananda, so that they could continue the work<br> of the mission of the Vedanta Society.</p>
</div>
<div id="side-content">
<table class="info">
<tbody>
<tr>
<th colspan="2" id="nutshell">IN A NUTSHELL
<img id="imag" src="second.jpeg" alt="Swami Vivekananda">
</th>
</tr>
<tr>
<th>
Born
</th>
<td>Narendranath Dutta<br>12 January 1863</td>
</tr>
<tr>
<th>
Died
</th>
<td>July 4,1902 </td>
</tr>
<tr>
<th>
Education
</th>
<td>Presidency College</td>
</tr>
<tr>
<th>
Joined Nava Vidhan
</th>
<td>1882</td>
</tr>
<tr>
<th>
Spiritual Guru
</th>
<td>Ramakrishna Paramhans</td>
</tr>
<tr>
<th>
1887
</th>
<td>Complilation of Sangeet Kalpataru</td>
</tr>
<tr>
<th>
Member of Freemasonry Lodge
</th>
<td>1884</td>
</tr>
<tr>
<th>
Visit to Chicago
</th>
<td>31st May 1893</td>
</tr>
<tr>
<th>
Parliament Of Religions
</th>
<td>September 1893</td>
</tr>
</table>
</div>
</div>
<footer>
<div id="quote">
<ul>
<li>
<p>"Arise,Awake and Donot stop until the goal is reached."<br>-Swami Vivekananda</p>
</li>
<li>
<p>Do read more about this impeccable personality <a href="https://en.wikipedia.org/wiki/Swami_Vivekananda">here.</a></p>
</li>
</ul>
</div>
</footer>
</div>
</body>
</html>
答案 0 :(得分：0)
欢迎来到前端世界。基本的HTML结构看起来不错。让我们得到它。
1）以下需要更正#nav宽度后缺少分号：150％，在#nutshell上有错字，在Lato是逗号（，）后而不是句点（。）的字体系列 下面是更正的CSS
#nav {
overflow: hidden;
background: darkblue;
position: relative;
top: 0;
width: 150%;
height: 80px;
line-height: 70px;
}
#nutshell {
font-family: "Lato", sans-serif;
font-weight: bold;
font-size: 25px;
text-align: center;
}
2）如果您未评论以下内容，则将对您的最大问题进行排序，但是您无法做出响应的就是您的响应能力。
#side-content {
/* height: 100%; */
width: 350px;
float: right;
clear: both;
position: relative;
/* bottom: 880px; */
/* overflow: hidden; */
}
3）首先，我建议将整个HTML切换为HTML结构。请访问W3schools https://www.w3schools.com/html/
为了获得良好的响应能力，这并不肿，我建议您结帐骨骼 http://getskeleton.com/
对于响应表，结帐https://codepen.io/HikwaMehluli/pen/JeYypV
表格HTML：
<table>
<thead>
<tr>
<th>Artist</th>
<th>Style</th>
</tr>
</thead>
<tbody>
<tr>
<td data-column="Artist">Mehluli Hikwa</td>
<td data-column="Style">Digital Design</td>
</tr>
<tr>
<td data-column="Artist">Pablo Picasso</td>
<td data-column="Style">Cubisim</td>
</tr>
<tr>
<td data-column="Artist">Henri Matisse</td>
<td data-column="Style">Draughtsmanship</td>
</tr>
<tr>
<td data-column="Artist">Jean-Antoine Watteau</td>
<td data-column="Style">Baroque</td>
</tr>
</tbody>
</table>
和CSS
table {
width: 900px;
border-collapse: collapse;
margin: 50px auto;
}
/* Different Color Strips */
tr:nth-of-type(odd) {
background: #f6f6f6;
}
/* Top Color of Table */
th {
background: #fdc20e;
color: black;
font-weight: bold;
}
td, th {
padding: 10px;
border: 1px solid #ccc;
text-align: left;
font-size: 18px;
}
/* Max width before table looks bad on smaller screens ~ 760px ~ specifically on iPads and below */
@media only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px) {
table {
width: 100%;
}
/* Force table to not be like tables anymore */
table, thead, tbody, th, td, tr {
display: block;
}
/* Hides table headers (but not display: none;, for accessibility) */
thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
tr { border: 1px solid #ccc; }
td {
/* Single row behaviour */
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 50%;
}
td:before {
/* give a table header effect */
position: absolute;
/* Top/left values mimic padding */
top: 6px;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
/* Label the data */
content: attr(data-column);
color: #000;
font-weight: bold;
}
}
祝你好运！