Div 경계가 올바른 위치에 나타나지 않습니다.

파란색 테두리가있는 div가 있습니다. 이 div는 꼬리말이므로 페이지의 맨 아래에 배치됩니다. 해당 div 내부의 텍스트가 아래쪽에 표시되지만 테두리 자체가 맨 위에 표시됩니다. 여기 Div 경계가 올바른 위치에 나타나지 않습니다.

는 HTML입니다 :

<body> 

<div id="header"> 
this is the header 
</div> 

<div id="mainleft"> 
this is the main left 
</div> 

<div id="mainright"> 
this is the main right 
</div> 

<div id="footer"> 
this is the footer 
</div> 

</body>

여기에 CSS입니다 : 바닥 글 DIV 하단에 표시되지 않는

body{ 
    background-color:#666666; 
} 

#header{ 
    min-height:75px; 
    border:3px solid #000099; 
} 

#mainleft{ 
    height:500px; 
    width:15%; 
    border-left:3px solid #000099; 
    float:left; 
} 
#mainright{ 
    height:500px; 
    width:84%; 
    border-left:3px solid #000099; 
    border-right:3px solid #000099; 
    float:right; 
} 

#footer{ 
    height:70px; 
    width:100%; 
    border:3px solid #098099; 
    bottom:0px; 
}

출처

2012-03-01 DonJuma

바닥 글 요소에 clear: both;을 추가하십시오.

출처

2012-03-01 01:20:50

이것은 매력처럼 작동했습니다. 전에는 CLEAR에 대해 들어 본 적이 없지만 감사합니다. – DonJuma

네, 미래의 위치/레이아웃 문제를 피하기 위해 위치를보고, 플로팅하고, 지우고, 표시하는 것이 좋습니다. 그리고 이것을 대답으로 표시하십시오. –

다음은 jsfiddle 링크입니다. http://jsfiddle.net/Zum7K/ – Sherzod

. 그 안에 모든 div를 래핑하고 속성 (너비, 높이 등)을 설정하는 컨테이너 div가 필요합니다.

출처

2012-03-01 01:20:49 CYMA

Div 경계가 올바른 위치에 나타나지 않습니다.

답변

관련 문제