이상하게도 충분히이 문제가있는 사람을 찾을 수 없습니다.CSS 및 jQuery : document.height가 제대로보고되지 않습니까? div가 수직으로 늘어나지 않습니다
O_O코드가 아니라 파이어 폭스, #main의 끝과 IE, 크롬 (사파리)의 실제 페이지의 끝 사이의 간격을 둡니다.
바닐라 CSS는 html, body{ min-height: 100%; height: auto !important; }입니다. #content은 입니다.
페이지 상단에서 하단까지 #main을 늘리려고합니다.
편집 : 더 많은 게임을 한 후, CSS 변경 계산을하기 전에 모든 내용이로드 된 #content에 따라 달라집니다. 한 페이지에서 다른 페이지로 전환하면 Chrome (및 Safari)이 #main에 적절한 높이를 설정할 수 있습니다. 코드를 기다릴 수있는 방법이 있습니까? 나는이 IE
<html>
<body>
<div id="main">
<div id="content">
<p>content area</p>
</div>
</div>
</body>
</html>
의 문제 그리고 CSS
html, body {height: 100%; margin: 0; padding: 0}
#main {
min-height: 100%;
height: auto !important;
width: 1024px;
position: absolute;
top:0;
left:50%;
margin-left:-512px
}
#content {margin: 135px 0 0 300px}
/* for illustrative purposes */
#main {background-color: #CDE}
체크 아웃 그냥 바이올린
http://jsfiddle.net/UB975/6/
나는 내 CSS를 피들로 보여줄 것이지만, 나는 그들의 서버를 부러 뜨렸다. 어쨌든,'# content'는'min-height : 555px;와'position : relative; 상단 : 135px; 및 내용을 요구하지 않는 한 그 이상 (최소 높이)을 지나지 않습니다. '# main'은'min-height : 100 % height : auto;'로되어 있기 때문에 필요하다면'# content '로 확장되지만 바닐라 CSS는 위치 지정 때문에 이런 식으로 작동하지 않게합니다. – Zydeco
업데이트하고 싶지 않으므로 거기에 '컨텐츠 영역'이상을 두십시오. 전체 효과를 위해 Lorem에 대한 10 단락 정도의 단락을 시도하십시오. – Zydeco
나는 바이올린 (새 링크)을 업데이트했다 : 절대적으로'# main'을 위치시키고 위치 지정 대신에'#content'에 여백을 사용했습니다. 또한 mooooooore 콘텐츠가 추가되었습니다. – Nimrod
추측 해결되는지 모르겠지만,하지만 한 가지 내가 좋겠 curses 사이에 들어가면'$ ('body'). height()'가 다른 것을 반환하는지보아야한다. (아마도 그렇지 않다.) – Pointy
나는 IE가 앞으로 6 백 년 안에 표준을 준수 할 것이라는 희망으로 맹세와 의상을 터트 렸기 때문에'$ (window) .load (function() 높이());}) {$ ('html')} 앞에 붙이기 ($ (document) .height() + ' ;는 IE에서 '928 - 924 - 500'의 결과를, Firefox에서는 '1102 - 948 - 500'의 결과를 주었다. 그것은 IE가보고 할 적절한 높이를 모르는 것과 같습니다. 그래서 나는 절대 위치를 언급했다. 차이가 있니? – Zydeco
보통 이런 문제가 생길 때마다 나는 한 걸음 물러서서 CSS로 미친 짓을하지 않도록 노력하고 있습니다. 2 열 세로 높이 레이아웃 일을하지 않는 한 페이지 높이를 조정할 필요가 없습니다. '# content' div가 절대적으로 위치하는 이유는 무엇입니까? – Pandincus