div 태그가 공백을 차지하지 않아야합니다.

#docoration이 #wrapper 외부에서 약간 확장됩니다. 브라우저 뷰포트가 910px이면 세로 스크롤 막대가 나타납니다.div 태그가 공백을 차지하지 않아야합니다.

어떻게하면 공간을 차지하지 않도록 지정하여 수직 스크롤 막대가 나타나지 않도록 할 수 있습니까?

편집 :

체크 아웃이 링크는 내가 원하는 걸 확인합니다. 그런 식으로 수직 스크롤 바가 없습니다. 오버 플로우를 사용

: 문제가 해결되지 않도록 #decoration의 일부를 클립합니다 숨겨져.

<head> 
    <style> 
     #wrapper { 
      width: 900px; 
      position: relative; 
     } 
     #decoration { 
      position: absolute; 
      width: 542px; 
      height: 126px; 
      top: 0; 
      left: 660px; 
     } 
    </style> 
</head> 
<body> 
    <div id="wrapper"> 
     <img id="decoration" src="/images/decoration.png" alt="" title="" /> 
     <div id="content"> 
      Some content 
     </div> 
    </div> 
</body>

출처

2011-03-21 Cudos

할 수 있습니다 설치 문제의 데모 또는 스크린 샷? – JohnP

집합 overflow: hidden 다른 답변으로 제안하고 있습니다.

그러나 "장식"이미지는 <img>이 아니어야하며 CSS background-image이어야합니다. 이처럼

#wrapper { 
    height: 126px; 
    background: #ccc url(http://dummyimage.com/542x126/f0f/fff) 660px 0 no-repeat 
}

참조 : http://jsfiddle.net/rdSJH/

출처

2011-03-21 16:25:04 thirtydot

, 더미 이미지 생성기 사이트 팁에 대해 +1 감사합니다! – clairesuzy

나는 내 질문에 열악하게 대답했다고 생각한다. 다음은 명확히 할 수있는 링크입니다. http://jsfiddle.net/HLqwN/ – Cudos

맞습니다. 귀하의 질문에 약간의 불확실성이 있습니다.그러나 당신의 설명 후에, 나는 이해한다고 생각합니다. 나는 overflow : hidden과 min-width : 500px를 가진 "outer wrapper"를 추가했다. 이제는 "장식"의 돌출 부분이 스크롤바를 나타나게 할 수 없습니다. 참조 : http://jsfiddle.net/HLqwN/1/ – thirtydot

오버 플로우 : 숨김; 귀하의 포장지에

출처

2011-03-21 16:16:37 Alex

작동하지 않습니다. #drapping의 일부가 잘립니다. # wrapper right border가 멈추고 – Cudos

장식 이미지 주위에 div를 포장하고 그것에 overflow:hidden을 설정할 수 있습니다. 래퍼에 overflow:hidden을 설정하면 레이아웃에 따라 다른 내용이 잘릴 수 있습니다.

그냥 장식이라면 배경 이미지로 시도해야합니다. 그렇다면 클리핑에 대해 걱정할 필요가 없습니다.

출처

2011-03-21 16:17:49

장식용 이미지 인 경우 HTML 소스가 아닌 래퍼의 배경 이미지로 사용해야합니다. 660 픽셀을 왼쪽으로 배치하면 내용이 아닌 콘텐츠 스크롤 막대가 나타나지 않습니다. .

#wrapper { 
    width: 900px; 
    position: relative; 
    background: url(background.png) no-repeat 660px 0; 
}

당신이 공간이 팝 아웃처럼, 그렇게 할 수있을 경우 장식이 래퍼를 중첩 할 수 있도록

OK [업데이트하여 설명 후]? 그래서이 시도되고

, fiddle

노트 : 래퍼 외부에 있어야 배경 이미지를 잡고 스팬, 스팬에 아무런 폭은 왼쪽 좌표 및 오른쪽 사용하지 : 0; 또는 오른쪽에서부터 여백을 불문하고 이미지를 배경 이미지로 사용하십시오. 스팬은 귀하의 HTML의 하단에 자리를 잡을 수

출처

2011-03-21 16:24:34 clairesuzy

div 태그가 공백을 차지하지 않아야합니다.

답변

관련 문제