CSS Div Footer Strange Behavior

내 자신의 블로그 테마를 개발하는 아이디어가 내 마음 속으로 흘러 들었지만 아마도 내 자신의 물건 만들기를 즐긴다. CSS와 HTML에 대한 경험이 거의 없기 때문에 이상한 문제가 발생했다. 이미.CSS Div Footer Strange Behavior

실제로는 꼬리말에 관한 것입니다. 큰 코드를 작성 했으므로 이제는 문제를 추적하려고하는데 아직 결과가 없습니다. 나는 여기에서 수색을 사용하여 유사한 문제의 일부를 분석했지만 여전히 결과가 없다. 여전히 모든 것을 감쌌다.

페이지 내용의 맨 아래에 꼬리말을 표시하려고하지만 브라우저의 창 하단 (항상 내용 중간)에 팝업이 표시됩니다. 여러분들이 코드를 살펴보실 수 있겠습니까? 저는 좋은 코더가 있다고 들었 기 때문에 정말로 도움을 청했습니다. 슬래시 도우미가 여기 있습니다.

제발 나를 바보 같은 것으로 가져 가지 마십시오. 초보자, 그게 내가 누구야! 그냥.

을 styles.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>

출처

2013-05-27 Lukas Valatka

절대 위치 지정을 제거하려고 시도 했습니까? –

그래,하지만 화면 상단의 어딘가에있는 머리글 막대 (고정되어 있음) 아래에 바닥 글이 떠있게됩니다. –

그러나 래퍼에서 친척을 제거하면 중간에 팝업되어 헤더 행 아래에 나타나게됩니다. –

쉬운 해결책은 수레를 사용하고, 필요한 경우이를 취소하는 것입니다.

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

사용하여 크롬 콘솔 (요소를 오른쪽 클릭하면-검사) 무슨 일이 일어나고 있는지보고 당신이 있다면 필요한 경우 조정 :

는 4 DIV 년대, 헤더, 내용, 사이드 바 및 바닥 글을 가지고 말할 수 있습니다 불안정한.

출처

2013-05-27 15:47:30

헤이 친구, 고마워! 나는 방금 절대 위치와 바닥 속성을 제거해야했고 그 부동으로 문자 그대로 날을 구했습니다! –

해결책으로 여기에서 묻는 질문에 대한 정답을 표시하여 다른 사람들이 문제가 해결 된 것을 확인하십시오 :) –

CSS Div Footer Strange Behavior

답변

관련 문제