세미프로젝트) body의 height가 100% 로 인식이 안되서 div가 body 안에 담기질 않음. 그로 인해 footer와 겹치는 현상 발생

리뷰 조회 페이지를 만드는데 리뷰 제목 클릭시 아코디언 형태로 보여주는 걸 만드려고했다.

아코디언은 성공했는데 리뷰 내용이 보이도록 열면 footer와 겹치게 되더라......

 

구글링 미친듯이 한 결과를 넣는다..

 

• body의 height가 100% 로 인식이 안되서 리뷰내용이 body 안에 담기질 않음.
  • html,body태그에 min-height: 100% !important; 부여
• 리뷰콘텐츠의 height가 안묶인 이유
  • 그룹핑을 잘못해서 안묶였음. 그래서 리뷰를 묶는 div 안에 각 항목들을 div로 묶었던 것을 <h3>태그 적힌 리뷰 <div>하나, 1개의 리뷰 리스트를 담은 <div>하나로 변경하고 리뷰 리스트 안에<table>과 그 해당 리뷰의 내용을 담은 <div>를 추가함

<div class="review_Inq">         	
  <table>
    <tr>
      <td class="reviewTitle rnum">${r.reviewNo}</td>
      <td class="reviewTitle">
      	<a href="#"><img src="http://placehold.it/50x80"></a>
      </td>
      <td class="reviewTitle rname">
          <span><a href="#">${r.recipeName}</a></span>
      </td>
      <td class="reviewTitle rsub" id="rsub-${r.reviewNo}">
          <span><a href="#"><c:out value= "${r.reviewSubject}" /></a></span>
      </td>
      <td class="reviewTitle rwriter">
          <span>${r.nickname }</span>
      </td>
      <td class="reviewTitle rdate">
          <span>${r.reviewDate }</span>
      </td>
      <td class="reviewTitle rcnt">
          <span>${r.hit}</span>
      </td>
    </tr>
  </table>
  <div class="review_content" id="review_content-${r.reviewNo}">
  	<div id="line"></div>
    <c:if test="${not empty r.reviewPhoto }">
      <div class="contentImage">                            	
      	<img src="<%=request.getContextPath() %>/files/${r.reviewPhoto}" style="width:500px; height:300px;">
      </div>
    </c:if>
    <div id="content"  style="padding: 0 100px;">
    	<p>${r.reviewContent }</p>
    </div>
    <div class="showWriter">
    	<button type="button" onclick="window.location='<%=request.getContextPath()%>/reviewModify?reviewNo=${r.reviewNo}&recipeName=${r.recipeName}&reviewSubject=${r.reviewSubject}&reviewContent=${r.reviewContent }&nickname=${r.nickname }';">수정</button>
   	 	<button type="button">삭제</button>
  	</div>
	<br>
  </div>  
</div>

•  footer가 그래도 계속 겹침
  • 리뷰 콘텐츠를 묶은 <div>에 padding-bottom을 footer heigth만큼 부여함.

 

 

++ 다른 상황이지만 자꾸 height 가 0으로 인식되는 경우, position : absolute를 쓰면 그러더라....

이럴 경우에는 부모로 있는 태그들에 overflow:hidden; 걸고 height가 유동적인 경우 heigth:auto; 도 추가로 걸면 해결됨.