2012-02-03 2 views
0

3 열이있는 표가 있고 첫 번째와 세 번째 열은 100 % 높이와 배경색을 가진 표를 사용하는 세로선으로 나뉩니다. FF로 정상적으로 작동하지만 Chrome이나 IE에서는 작동하지 않습니다.2px 너비와 배경색이없는 빈 div는 높이가 100 %로 표시됩니다.

이제 테이블을 div 태그로 바꾸지 만 비어있는 div는 표시되지 않습니다. 아래 예제 코드는 내가 지금 무엇을 사용하는지 혼란스러워 많은 것을 시도했다. CSS Gurus의 도움이 필요합니다.

.PageLine2V 
    { 
     width:2px; 
     content: ""; 
     min-height: 100%; 
     background-color:#D1C094; 
     background-image:url('../images/gold-line-2v.gif'); 
     background-repeat:repeat-y; 
    } 
<table height="100%"> 
     <td width="60px" valign="top" align="center" > 
     <div class="PageLine2V"></div> 
     </td> 
</table> 

나는이 빈 DIV 쇼를하고도

답변

2
.PageLine2V 
    { 
     width:2px; 
     content: ""; 
     min-height: 100%; 
     background-color:#D1C094; 
     background-image:url('../images/gold-line-2v.gif'); 
     background-repeat:repeat-y; 
     height: 100%; 

    } 

테이블 높이 성장 사업부 100 % 또한

을 높이 보내기에 무언가를 추가하는 방법을 잘 모르겠습니다 div는 내용없이 렌더링하지 않는 공간과 같은 div입니다.

<table height="100%"> 
     <td width="60px" valign="top" align="center" > 
     <div class="PageLine2V">&nbsp;</div> 
     </td> 
</table> 
+0

아직 작동하지 않습니다. – Learning

+0

@StudentDubai 업데이트되었습니다. 내 제안을 시도했습니다. –

+0

상위 테이블에서 문제가 발생했습니다. 높이 = 100 %로 문제가 해결되어 올바르게 표시됩니다. 모든 브라우저에서 – Learning

-1

위치 지정 : 절대; http://jsfiddle.net/eg6DP/

왼쪽 끝에 볼 수 있으며, 그 자리에있는 동안 테이블에 위치 할 수도 있습니다.

+0

그것은 내 웹 페이지와 함께 사용할 때 나타나지 않습니다. 조사 할 필요가 있습니다. PR과 같이 겹칠 수 있습니다. 문제는 div 태그에 문자를 넣을 때 줄을 표시하지만 그것은 비어있을 때 .. – Learning

+0

태그 옆에 공백을 추가하십시오 :

zero

1

높이를 100 %로 설정하려면 부모가 명시 적으로 높이를 정의해야합니다. height: 100%을 td (div의 부모)에 추가하십시오. jsfiddle로 테스트하고 작업했습니다.

0
.PageLine2V 
{ 
    width:2px; 
    content: ""; 
    min-height: 100%; 
    background-color:#D1C094; 
    background-image:url('../images/gold-line-2v.gif'); 
    background-repeat:repeat-y; 
    height: 35px; /* As required */ 
    display:inline-block; 

} 

희망. 내가 시도한 것처럼 고정 높이가있는 동일한 코드를 픽셀 단위로 사용하고 display:inline-block;을 추가했습니다. 다음으로, 추가 위치 지정을 위해 상위 높이 매개 변수를 조정 해보십시오.

관련 문제