2009-10-25 5 views
0

내 웹 사이트에 두 개의 측면 테두리가 있습니다. 왼쪽 및 오른쪽 ... 웹 사이트를 반복하는 15x15 크기의 작은 이미지 ... 아래처럼 테두리를 100 %로 설정하면 " 한 화면 "아래로 이동합니다 (100 %). 그러나 내 웹 사이트는 동적이며 내용이 변경됩니다 ... 페이지의 전체 높이와 함께 테두리를 변경하고 싶습니다 ... 어떻게해야합니까? 또한,쪽 테두리 및 동적 내용 도움말

<div class="bgr_right"></div> 

위치입니다 :

여기
.bgr_right { 
background-image: url(../Graphics/bgr_right.jpg); 
background-repeat: repeat-y; 
background-position: right; 
position: absolute; 
top: 0px; 
height: 100%; 
width: 30px; 
right: 0px; 
background-color: #E7F5F0; 
    } 

는 HTML의 DIV입니다 : 절대 옳은 일이 여기

는 CSS입니까?

UPDATE : 응답을 읽은 후, 나는 더 나은 방법이 있어야한다 생각 ... , 자바 스크립트로는 얻을 수있는 방법이 있는지 javascipt 사용에 대한 ... 는 사람은 알고 있나요 어떻게 몸 높이? 다음 :

 <div height="javascript_function()" or something... 

??? 레이아웃을 포함하는 테이블을 사용 - 화가의 의견과 평판의 손실의 위험에서 다시

답변

0

감사합니다. 전체 높이 테두리를 사용하지 않으면 콘텐츠와 동일한 높이로 자동 조정됩니다. 당신은 고정 폭 디자인이있는 경우

<table> 
    <tr> 
    <td class="bgr_left"></td> 
    <td class="content"></td> 
    <td class="bgr_right"></td> 
    </tr> 
</table> 
+1

잠깐만 실례 단지 배경을 얻기 위해 마크 업에 빈 요소를 가지고 정말 아무 필요가; 표, div 또는 기타 요소. 항상 예외는 있지만, 아주 간단하게 레이아웃입니다. – jeroen

+0

@Jeroen, 귀하의 의견을 높이 평가 한 결과, 그 이후로 생각했습니다. 그는 * empty * 엘리먼트를 제안하고 있다고 생각하지 않는다. 그는 테이블 셀에''형을 채우지 않고 마크 업 구조를 보여 주려고했다. ... 그렇게 말하면 테이블 레이아웃을 사용하는 것에 동의하지 않지만 쉽게 나타납니다. –

+0

@ricebowl, 열의 클래스 이름은 배경에만 표시된다는 것을 제안합니다. 나는 사용하지 않는 테이블 부분에 동의한다. 내 경험에 따르면 div/css를 사용하면 모든 것이 더 쉽고 유연하게 수행되지만 내 의견은 테이블에만 해당되는 것이 아니라 여분의 div는 OP 중복도 포함된다. – jeroen

0

, 당신은 당신이 원하는 효과에 따라, 신체 또는 콘텐츠 컨테이너 중 하나 개의 배경 이미지를 사용할 수 있습니다.

반복-Y와
(left bar)-> | ([x]px space here) | <-(right bar) 

, 이것은 당신에게 줄 것이다 :이 이미지는 뭔가 같은 것

|    | 
|    | 
|    | 
| content here | 
|    | 
|    | 
|    | 

그런 다음 막대 콘텐츠로 높은 것이다. 이것을 <body>에 적용하면 몸체의 높이가됩니다.

희망이 도움이됩니다.

0

배경이 빈 것처럼 별도 div를 사용하는 이유가없는 것 같지만 열 너비가 고정되어 있는지 여부에 따라 다릅니다.

배경을 갖고 싶은 div에 배경 이미지를 적용해야합니다. 이렇게하면 div가 커짐에 따라 계속 계속됩니다. 당신의 열 너비가 해결 된 경우

  1. , 당신은 단지 은 수직으로 반복됩니다 매우 넓은 이미지의 왼쪽과 오른쪽 이미지를 결합 할 수 있습니다.

  2. 당신의 열 너비가 변수 인 경우, 당신은 예를 들어, 성장 사업부에서 왼쪽 배경을 가질 수 있고 성장 사업부가 포함 된 래퍼 DIV의 오른쪽 하나.

올바른 패딩을 사용하면 원하는 효과를 얻을 수 있습니다.

1

Alternativly 콘텐츠 컨테이너 주위에 다른 두 div를 래핑하고 한 div에서 왼쪽으로, 다른 한 줄에서 오른쪽으로 정렬하는 배경을 반복하는 것이 좋습니다. 예 : 다음

<div id="left_wrapper" style="background: url(my_leftimage.png) y-repeat top left;"> 
<div id="right_wrapper" style="background: url(my_rightimage.png) y-repeat top right;"> 

    <div id="content">hello world</div> 

</div> 
</div> 

당신이 그것을 높이 100 % html로, 신체와 CSS에서이 같은 100 % 높이로 콘텐츠 컨테이너 설정으로 이동하려면 :

HTML, 몸, #content를 {높이 : 100 %; }

희망이 도움이 :)

관련 문제