이전 div의 절대 위치 지정이있는 스티치 CSS 바닥 글

브라우저 창의 아래쪽에 바닥 글을 배치하려고합니다. 콘텐츠 div의 높이가 다양하기 때문에 콘텐츠 div의 절대 위치가 결정됩니다. 몇 가지 다른 방법을 살펴 보았습니다. 그러나 어떤 이유로 #content div와 바닥 글 위치 자체가 머리글과 내용 div 사이에 나옵니다. 누구에게 아이디어가 있습니까?이전 div의 절대 위치 지정이있는 스티치 CSS 바닥 글

여기 여기 내 CSS

#header { 
height:115px; 
position: relative; 
color: #000; 
padding-top: 10px; 
border-bottom:1px solid #fff; 
-moz-box-shadow: 0 0 10px 10px #ccc; 
-webkit-box-shadow: 0 0 10px 10px #ccc; 
box-shadow: 0 0 10px 10px #ccc; 
} 

#content { 
width:900px; 
height:100%; 
margin-top:40px; 
margin-left:-450px; 
left:50%; 
position:absolute;  
} 

#footer { 
width:auto; 
height:100px; 
background:#d21f27; 
margin-top:5px; 
clear:both; 
bottom:0;  
}

출처

2012-06-13 davidb

높이를 변경하는 절대 위치에 대한 필요가 없습니다 내 HTML

<div id="header"></div> 
    <div id="content">                   
     @RenderBody()         
    </div>        
<div id="footer"></div>

입니다.

는 Fidrizers 말했듯이 http://jsfiddle.net/XpKJG/

Read when to use absolute and when not to

출처

2012-06-13 14:45:47

나는 바닥 글 만 컨텐츠 사업부의 내용의 마지막 조각 아래에 표시되는 콘텐츠 사업부에 절대 위치를 제거 http://jsfiddle.net/ubJAf/2/. 브라우저 하단에 붙어 있지 않습니다. – davidb

내가 공유 한 jsfiddle을 확인 했습니까? 그것은 분명히 바닥의 끝에 붙어 있습니다. 어쩌면 당신은 근본적인 문제를 자신의 jsfiddle에 제공 할 수 있습니다. –

그래, 나는 그것을 보았다. 나는 그것을 평범한 html과 css에서 독립적으로 작업하도록했지만 @renderbody와 관련이 있다고 생각한다. 이것은 .net에 있습니다. 일부 페이지에서는 작동하지만 다른 페이지에서는 작동하지 않는 것 같습니다. – davidb

, 절대 위치 #content 필요가 없을 것 대답을 참조하십시오.
하지만 몇 가지 이유로, 예 : 특별한 인터페이스 디자인, 유용 할 수 있습니다. 끈적 끈적한 바닥 글을 만들려면

, 라이언에서 해결 는 내가 알고있는 가장 쉽고 안정적인 방법입니다 기정 :
http://ryanfait.com/sticky-footer/

당신은 당신의 레이아웃이 적용 top: 125px; right: 0; bottom: 100px; left: 0으로 #content 절대 설정할 수 있습니다 .

중요 : 뷰포트의 너비와 높이에 따라 콘텐츠가 사라질 수있는 문제가 있습니다. 이 작업을 권장하지 않지만 문제가 해결 될 수 있습니다.

데모 :

출처

2012-06-13 15:53:57

이전 div의 절대 위치 지정이있는 스티치 CSS 바닥 글

답변

관련 문제