0
문제점이있어서 도움이 필요합니다.중첩 된 div가 내용과 올바르게 스태킹되지 않음
콘텐츠가없는 한 중첩 된 div가 잘 보입니다. 테스트 텍스트를 추가하고 나면 페이지에 많은 내용이 포함될 수 있으므로 div 위에 공백이 나타납니다. 여기에 문제의 스크린 샷에 대한 링크입니다 :
http://www.stephencamper.com/screenshot/screenshot.gif
는 ... 여기에 같은 코드가 어떻게 표시되는지를 보여줍니다 : 나는 해결책을 보였다 발견
html, body {
margin: 0;
padding: 0;
}
#wrap {
width: 1024px;
margin: auto;
}
#header {
width: 982px;
height: 98px;
margin: auto;
}
#body_container {
width: 982px;
}
#top_inner_bg {
width: 982px;
background: #FFF url(images/top_inner_bg.gif) no-repeat top; height: 9px;
}
#sides_inner_bg {
width: 982px;
background: #CCC url(images/vert_inner_bg.gif) repeat-x top; /* img ht is 2000px; it's supposed to fade transp after 770px; no sure if correct way to do this */
}
#bot_inner_bg {
margin: auto;
width: 980px;
height: 100%;
background: #E8E7E3;
}<div id="wrap">
<!-- header -->
<div id="header">
header here
</div>
<!-- body -->
<div id="body_container">
<div id="top_inner_bg"> </div>
<div id="sides_inner_bg">
<div id="bot_inner_bg">
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
</div>
</div>
</div>
</div>여백 넘침에 대한 것. 내가 오버플로를 시도 : 숨겨진;하지만 그 작동하지 않았다. 내 divs 중 하나를 부동하지 않습니다, 그래서 clearfix가 나를 위해 작동하지 않습니다. div에 테두리를 추가하면 작동하지만 - 이제 경계선이 생기고 top_inner_bg div와 원활하게 조화를 이루기 위해 측면 이미지가 필요하므로 경계선이 필요하지 않습니다.
도와주세요.
감사합니다.
-Stephen
귀하의 스크린 샷은 403 오류 페이지를 반환합니다. –
나는 404를 얻는다. 또한 오류를 처리 할 때 브라우저가 뱉어내는 것을 제한하고 싶을 수도있다. 그렇게 엄격 해집니다. – volvox
div의 CSS 높이로 인해 발생할 수 있습니다
– GibboK