끈적한 꼬리말로 열을 추가 할 때의 문제

Question

내 페이지에 열을 추가하려고 할 때마다 바닥 글이 벗겨지고 내용이 바닥 글에 저장됩니다. 그러나 콘텐츠를 곧바로 보유 콘텐츠 div에 추가하면 완벽하게 작동합니다.

HTML :

<div id="wrapper"> 

    <div id="content"> 
    <div class="left_content"> 
    </div> 
    <div class="right_content"> 
    </div> 
    </div> 

    <div id="footer"></div> 
</div> 

CSS :

html, 
body { 
margin:0; 
padding:0; 
height:100%; 
font-family: arial, sans-serif; 
} 

#wrapper { 
min-height:100%; 
position:relative; 
} 

#content { 
padding-bottom:96px; /* Height of the footer element */ 
width: 960px; 
margin-left: auto; 
margin-right: auto; 
} 

#footer { 
background:#162b83; 
width:960px; 
height:96px; 
position:absolute; 
bottom:0; 
left:50%; 
margin-left: -480px; 
} 

div.left_content { 
width: 500px; 
margin-right: 60px; 
float: left; 
} 

div.right_content { 
width: 400px; 
float: left; 
} 

Answer 1

안녕하세요 난 당신의 코드에서 일부 조정을 만든이 필요한 것입니다, 그것을 확인하시기 바랍니다 here 업데이트. 감사.

HTML

<div id="content"> 
    <div class="left_content"> 
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> 
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> 
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> 
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> 
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.SS</p> 
    </div> 
    <div class="right_content"> sdfasd </div> 
    <div class="footer-outer"> 
    <div id="footer"></div> 
    </div> 
</div> 

CSS

body { 
    padding: 0; 
    margin: 0; 
} 
#content { 
    padding-bottom: 96px; /* Height of the footer element */ 
    width: 960px; 
    margin: 0 auto; 
} 
div.left_content { 
    width: 500px; 
    margin-right: 60px; 
    float: left; 
} 
div.right_content { 
    width: 400px; 
    float: left; 
} 
.footer-outer { 
    float: left; 
    width: 960px; 
    position: relative; 
} 
#footer { 
    background: #162b83; 
    width: 960px; 
    height: 96px; 
    position: absolute; 
    bottom: -96px; 
    left: 0; 
}