2010-04-14 2 views
3

난 다음 CSS와 중심 래퍼 가지고 난 다음 CSS와 DIV가 내부CSS - div가 창 밖으로 나왔을 때 브라우저가 스크롤 막대를 표시하지 않도록하려면 어떻게해야합니까?

div.wrapper { 
width: 1170px; 
padding-left:30px; 
margin-top: 80px; 
margin-bottom:20px; 
margin-left: auto; 
margin-right: auto; 
position:relative; 
background-color:black; } 

이 DIV 내부

position:absolute; 
top:-26px; 
left:517px; 
height:63px; 
z-index:3; 

를 759px 폭을 갖는 이미지는 그 래퍼를 만든다 브라우저가 더 낮은 디스플레이 해상도에서 v- 스크롤바를 표시하도록합니다. 내가 원하는 것은 이미지를 래퍼 외부로 이동하지만 브라우저가 스크롤바를 표시하지 못하도록하기 때문에 브라우저 창 크기가 충분하고 래퍼가 1200px 너비를 유지하는 경우에만 이미지의 오른쪽이 표시됩니다. 나는 다른 콘텐츠의 일부를 넘기 때문에 배경 이미지로 만들 수 없습니다. > = IE7과 호환되는 것이 좋을 것입니다. 그것은 1200 픽셀 폭을 가지고 다음 창보다 작은 x 1200 픽셀 경우를 제외하고 항상 (윈도우의 중심에, http://img153.imageshack.us/img153/6070/hpx.jpg

파란색 상자가 래퍼 :

은 내가 무슨 뜻인지 보여주기 위해 페이지의 그림을 업로드 빨간색 상자가 이미지입니다 (녹색 막대는 일부가 아닙니다)

+0

텍스트 및 디자인만으로 사이트를 사용할 수 있습니까? plz 설명하고 왜 당신이 이것에 대해 논평 하는지를 설명하는 동안 plz? 당신은 분명히 아무 대답이나 제안도하지 않았습니까? – x4rf41

+0

@xarfai 그는 자신의 인터페이스가 이상적이지 않다고 생각한다고 조언합니다. 그는 당신의 질문에 대답하려하지 않았지만, 그는 당신을 아무렇게나 도우려는 말을 남겼습니다. 제발 싸우지 않으려 고 노력하십시오.이 사이트는 그렇지 않습니다. –

+0

@xarfai, Firebug, Chrome 등을 통해 볼 수있는 데모 페이지에 대한 링크가있어 문제를 해결할 수있는 대체 솔루션이 있는지 확인할 수 있습니다. –

답변

2

콘텐츠를 숨기려면 #your_div { overflow: hidden; }을 찾고 있습니다. div 바로 바깥 쪽에서 콘텐츠를 볼 수있게하려면 #your_div { overflow: visible; }을 입력하십시오.

+0

브라우저에서 스크롤바를 표시하도록 오버플로를 설정하면 div가 실제로 div 외부에 있지 않고 래퍼가 내부 div와 함께 커집니다. – x4rf41

+0

Aw ... 그래, 어디서 broswer의 창 스크롤 막대에 대해 대화하는지 알 수 있습니다. 그러면 래퍼 div의 너비를 창 크기의 100 %로 설정하고 내용이 더 커지지 않도록 할 것입니다.하지만 당신은이 작업에 따라 CSS를 리팩토링하는 작업이 조금 있습니다. – Arko

4

래퍼의 크기를 초과하는 내용이 표시되지 않도록 overflow: hidden을 래퍼로 설정할 수 있습니다.

overflow

+0

오버플로가 보이기를 원합니다. 이미지가 래퍼 외부에 표시되기를 원하지만 브라우저가 스크롤 막대를 표시하기를 원합니다. – x4rf41

2

주어진 요구 사항에 떠오르는 유일한 방법은 전체 창에 관련하여 그 래퍼 DIV 위치 그것의 내부 요소를 이동하는 것입니다 참조 :

<body> 
    <div class="abs">the div with the image</div> 
    <div class="wrapper">the wrapper div</div> 
</body> 

불행히도 이것은 아마도 당신이 그것을 잘 배치 할 수 없다는 것을 의미합니다. 자바 스크립트를 사용하여 페이지의 너비/높이 및/또는 래퍼 div의 위치를 ​​가져와 그에 따라 오프셋을 계산해야 할 수 있습니다. (이 비트에 대해서는 Stack Overflow에 관한 질문을 찾을 수 있습니다.)

1

문제는 img가 인라인 됨으로 인해 발생합니다. 테스트하지는 않았지만 이미지를 '표시하고 차단'한 다음 플로팅하거나 절대적으로 배치해야합니다.

관련 문제