하위 div가 튀어 나오거나 상대적으로 상위 div/footer 문제가 발생했습니다.

내 div에 문제가 있습니다. 나는 게시물이 그것 (WordPress의 테마)에 배치 될 때 스트레칭 될 컨텐츠 부모 다이빙을 바닥에서부터 퍼뜨리는 child div없이 만들려고합니다. 나는 이것에 열쇠가 부모 div 절대적으로 만드는 것을 발견했다, 그러나 이것은 나를 위해 또 다른 문제를 만든다. 문제는 콘텐츠 div가 늘어남에 따라 움직이는 비교적 위치가 지정된 바닥 글을 원한다는 것입니다. 그래서 내가하려고하는 것은 "stretchy"콘텐츠 div와 상대적으로 배치 된 footer를 동시에 가질 수 있다는 것입니다. 여기에 내 CSS가 :하위 div가 튀어 나오거나 상대적으로 상위 div/footer 문제가 발생했습니다.

body{height: 100%; 
margin: 0; 
padding: 0; 
} 
#wrapper{width: 100%; 
min-height: 100%; 
height: auto !important; 
height: 100%; 
} 
#content{height: 35em; 
width: 30em: 
position: absolute; 
padding: .62em; 
margin: 5em; 
} 
.post{width: 12em; 
height: 12em; 
margin: 1em; 
float: left; 
} 
#footer{position: absolute; 
bottom: 0; 
left: 0; 
width: 100%; 
text-align: center; 
margin: 1em 0 0; 
}

내가 말했던 것처럼, 나는 이미 상대 위치를 시도했지만, 내 좋아하는 작동하지 않았다. 나는 또한 큰 해상도의 화면에서 잘 작동하는 "sticky footer"방법을 시도했지만 더 작은 res 화면에서 z-index에 따라 content div 앞이나 뒤에 표시합니다. 또한 그것이 가능하면 JS를 사용하지 않는 것이 좋습니다. 어떤 도움을 많이 주시면 감사하겠습니다! 는

변경 높이가 최소 높이를하는 컨텐츠에 자동으로 여기에 코드

출처

2012-09-08 Alfonso Verdeja

설정 오버 플로우를 입력 내용에

는 jsfiddle 그것을 보여주고있다 : http://jsfiddle.net/mAhet/

HTML

<html> 
<body> 
    <div id="wrapper"> 
     <div id="content"> 
      <div style="position:relative; width:100%; height:100%;"> 
      <div class="post">lasa sf </div> 
      <div class="post"> asd asd as</div> 
      <div class="post"> asd a dsadda das</div> 
     </div> 
     </div> 
     <div id="footer"></div> 
    </div> 
</body> 
</html>

CSS

body{height: 100%; 
margin: 0; 
padding: 0; 
} 
#wrapper{width: 100%; 
min-height: 100%; 
height: auto !important; 
height: 100%; 
position:relative; 
} 
#content{ 

min-height: 35em; 
width: 30em: 
position: absolute; 
padding: .62em; 
margin: 5em; 
overflow:auto; 
} 
.post{width: 12em; 
height: 12em; 
margin: 1em; 
float: left; 
} 
#footer{position: absolute; 
bottom: 0; 
left: 0; 
width: 100%; 
text-align: center; 
margin: 1em 0 0; 
}

jsfiddle는 행동을 보여주고있다 : http://jsfiddle.net/mAhet/

출처

2012-09-08 07:10:28 jett

하위 div가 튀어 나오거나 상대적으로 상위 div/footer 문제가 발생했습니다.

답변

관련 문제