开发自己的博客主题的想法突然出现在我的脑海中，可能我喜欢制作自己的东西，但是我在 CSS 和 HTML 方面的经验很少，所以我已经遇到了一些奇怪的问题。
实际上，它与页脚有关。我已经编写了一大段代码，现在我正在尝试追溯问题，但还没有结果。我这里用过搜索，分析了一些类似的问题，还是没有结果。即使包裹了一切，仍然一无所有。
我正在尝试使页脚出现在页面内容的最底部，但它总是弹出在浏览器窗口的底部（位于内容中间的某个位置）。你们能看一下代码吗 - 我非常感谢帮助，因为我听说这里有一些优秀的编码器斜线助手。
请不要把我当成白痴或类似的东西。新手，我就是这样！只是。
样式.css
h
tml{
min-height: 100%;
}
body {
margin: 0;
padding: 0;
font: 16px Georgia;
line-height:25.88854px;
color:#222222;
height:100%;
}
#wrapper {
min-height:100%;
position:relative;
}
#footeris {
position: absolute;
bottom:-20px;
height: 100px;
min-width: 100%;
background: #00a651;
}
#blogheader {
min-width: 100%;
height: 55px;
background: #00a651;
position: fixed;
z-index:3;
}
#menu {
width: 900px;
height: 55px;
background: #00a651;
display: block;
margin: auto;
}
#social {
width: 200px;
height: 55px;
display: block;
float: right;
margin: auto;
}
#twitter {
margin-top:12px;
margin-right: 15px;
float: right;
}
#twitter:hover
{
margin-top:15px;
}
#googleplus:hover
{
margin-top:15px;
}
#youtube:hover
{
margin-top:15px;
}
#googleplus {
margin-top:12px;
margin-right: 15px;
float: right;
}
#youtube {
margin-top:12px;
margin-right: 15px;
float: right;
}
#menubutton1 {
display:inline-block;
height:55px;
background: #00a651;
}
#menubutton1:hover
{
background-color:#000000;
}
#navigacija {
width: 600px;
height:55px;
float: left;
padding:0;
}
#navigacija li {
display:inline;
}
#navigacija li a {
font-family:Arial;
font-size:20px;
font-weight: bold;
text-decoration: none;
letter-spacing: 1.5px;
padding-top:100%;
padding-bottom:14px;
padding-left:18px;
padding-right:18px;
background-color: #00a651;
color:#ffffff;
}
#navigacija li a:hover {
background-color:#000000;
}
#name {
position:relative
color: #FFFFFF;
padding-top: 18px;
padding-left: 9px;
padding-right: 9px;
height:55px;
}
#name a {
display: block;
width: 100%;
height: 100%;
text-decoration: none;
cursor: pointer;
}
#line {
margin-left: auto;
margin-right: auto;
height: 7px;
background: #C9C9C7;
}
#blogbody {
width: 1024px;
min-height:100%;
margin-left: auto;
margin-right: auto;
padding-bottom:60px;
z-index:2;
}
#myinfo {
float: right;
max-width: 300px;
background: #DDE3DC;
z-index: 1;
border-bottom: 2px solid #cccccc;
display:inline-block;
}
#myinfotext {
margin-bottom: 20px;
font: 17px Georgia;
line-height:25.88854px;
color:#222222;
text-align:left;
padding-left:40px;
}
a {
color: #00a651;
text-decoration: none;
}
h1 {
font-size: 25px;
font-weight:normal;
font-family: Helvetica Neue;
color: #474A46;
}
#me {
margin-left:auto;
margin-right:auto;
background: url(images/me.png) no-repeat;
width: 120px;
height: 120px;
}
#content {
width: 615px;
float: left;
margin-top: 55px;
min-height:100%;
}
#blogprojects {
width: 615px;
height: 200px;
display: block;
float: left;
padding: 20px;
border-bottom: 1px solid #cccccc;
}
#newsfeed {
width: 615px;
float: left;
padding: 20px;
padding-top: 15px;
}
#blogpost {
width: 615px;
float: left;
padding: 20px;
}
#blogsidebar {
width: 300px;
min-height: 100%;
background: #DDE3DC;
display: block;
float: right;
border-left: 2px dashed #cccccc;
padding: 25px;
margin-top: 55px;
z-index:1;
}
#blogwidget {
margin-top: 20px;
width: 300px;
display:inline-block;
border-bottom: 2px solid #cccccc;
}
#blogwidgetcontent {
margin-bottom: 20px;
}
HTML 代码
<!DOCTYPE HTML>
<html>
<head>
<title>Lukas Valatka Blog</title>
<link rel="stylesheet" href="styles.css">
</link>
</head>
<body>
<div id="wrapper">
<div id="blogheader">
<div id="menu">
<div id="navigacija">
<ul id="navigacija">
<li><a href="#">POSTS</a></li>
<li><a href="#">About</a></li>
<li><a href="#">About</a></li>
</ul>
</div>
<div id="social">
<div id="twitter">
<a href="https://twitter.com/a" title="Visit my Twitter"><img src="images/social/twitter.png" alt="Twitter" ></a>
</div>
<div id="googleplus">
<img src="images/social/googleplus.png" alt="Google Plus" >
</div>
<div id="youtube">
<img src="images/social/youtube.png" alt="Youtube" >
</div>
</div>
</div>
<div id="line">
</div>
</div>
<div id="blogbody">
<div id="content">
<div id="blogprojects">
<h1>Recent Projects</h1>
test
</div>
<div id="linijele">
</div>
<div id="newsfeed">
<h1>What's Going On</h1>
<div id="blogpost">
<h2>Test</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis luctus, ante at gravida condimentum, nibh eros bibendum dolor, non aliquam augue velit sit amet lectus. Phasellus pellentesque diam quis metus fermentum sollicitudin. Suspendisse suscipit, enim quis ultricies congue, lectus sem luctus orci, non lacinia nunc ante non augue. Praesent at ante lectus. In quam magna, eleifend ornare facilisis sed, dignissim a nunc. Nullam ultricies vulputate lorem nec sagittis. Nullam vulputate nisi vel lorem pharetra volutpat. Suspendisse dui est, consectetur malesuada consequat nec, egestas et lorem. Nulla facilisi. Maecenas eleifend pulvinar tincidunt. Donec eu orci at libero ultricies ornare. Suspendisse potenti. Nullam tortor ante, rutrum ut sollicitudin at, pulvinar vel orci. Sed semper sem tincidunt urna cursus et ultrices tortor aliquet. Vestibulum pellentesque arcu dictum nisl mollis auctor.
Proin ut vehicula risus. Nulla ut urna sit amet neque commodo venenatis. Nulla hendrerit tincidunt tellus, congue convallis orci porta non. Nam sollicitudin ultricies dui, id dignissim odio tempus eu. Fusce viverra condimentum euismod. Suspendisse mauris magna, pulvinar venenatis porttitor id, interdum a purus. Donec nisi augue, semper eu fermentum ac, blandit at justo. Phasellus aliquet ultrices dapibus. Donec nibh libero, tempus ut pellentesque a, aliquet ut libero. In hac habitasse platea dictumst. Nam eget nunc lectus, in commodo odio.
Nulla a justo nunc, quis sollicitudin ante. Proin mi magna, tempor sit amet porttitor volutpat, luctus eu sem. Vestibulum porttitor arcu eget magna vulputate quis laoreet massa mollis. Maecenas justo nibh, ornare elementum ornare quis, aliquam sit amet velit. Cras hendrerit consequat viverra. Aenean eget libero at urna viverra rutrum. Fusce eleifend tincidunt dignissim. Nam pellentesque aliquam lacinia. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
Etiam massa nisl, luctus sollicitudin congue non, suscipit ac justo. Morbi pretium elementum urna, et dignissim lectus viverra vel. Duis sit amet massa felis, ut consequat dolor. Nullam in justo lectus, id rutrum metus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent fringilla urna rutrum orci dignissim a mollis leo varius. Vivamus accumsan neque a nisl ornare vel ultricies eros ultrices. Quisque nec odio non libero pellentesque molestie in ut quam. Phasellus feugiat consequat nunc, commodo venenatis tortor volutpat eget. Curabitur tristique posuere mollis. Quisque sit amet lacus nec elit fermentum laoreet sed vitae neque. Sed sem leo, fermentum eu sagittis in, auctor eget lacus. Duis lacus orci, semper vitae faucibus vitae, bibendum ac augue. Curabitur at felis ac mi dictum adipiscing.
</div>
</div>
</div>
<div id="blogsidebar">
<div id="myinfo">
<div id="me">
</div>
<center>
<h1>
<a href="http://">L</a>
</h1>
<div id="myinfotext">
Hey
</div>
</center>
</div>
<div id="blogwidget">
<div id="blogwidgetcontent">
<h1>
Latest Tweets
</h1>
<a class="twitter-timeline" data-tweet-limit="3" href="https://twitter.com/" data-widget-id="3168357470">Tweets by @L</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>
</div>
</div>
</div>
<div id="footeris">Copyright 2013.</div>
</div>
</body>
</html>