html - CSS Div フッターの奇妙な動作

Question

自分のブログのテーマを開発するというアイデアが頭に浮かびました。おそらく、自分で何かを作ることを楽しんでいますが、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>

score 0 · Accepted Answer

簡単な解決策は、フロートを使用し、必要に応じてクリアすることです。

ヘッダー、コンテンツ、サイドバー、フッターの 4 つの div があるとします。

.header { width:100%; height:100px; float:left; }
.content { width:65%; float:left; }
.sidebar { width:35%; float:right; }
.footer { width:100%; float:left; clear:both; }

Chrome コンソール (rightclick-inspect 要素) を使用して何が起こっているかを確認し、不明な場合は必要に応じて調整してください。

html - CSS Div フッターの奇妙な動作

1 に答える 1

Related

Reference