민서네집

overflow-y scroll overflow-x hidden => 웹브라우저에서 스크롤 이동 시 공백이 보임. 본문

WEB (HTML, CSS)

overflow-y scroll overflow-x hidden => 웹브라우저에서 스크롤 이동 시 공백이 보임.

브라이언7 2013. 12. 30. 16:20

웹브라우저에서 스크롤바에 관련된 이상한 현상이 있었다.


가로축의 스크롤바가 생기도록 웹브라우저의 가로 크기를 줄이고, 가로축의 스크롤바를 오른쪽으로 옮기면 가려져 있던 부분은 모두 공백으로 보이는 현상이 있었다.


footer 가 한 화면에 보이도록 wrap 에 overscroll-y: auto; 스타일을 주었는데, overscroll-x: visible; 스타일을 주어도 적용이 안되고, 여전히 공백으로 보이는 것이다.


이상해서 구글에 "overflow-y scroll overflow-x hidden" 이라는 검색어로 검색을 해 보았다.


stackoverflow.com 사이트에서 이것이 이슈가 될만한 내용이라는 것을 알았다.


[참고] http://stackoverflow.com/questions/6421966/css-overflow-x-visible-and-overflow-y-hidden-causing-scrollbar-issue


[참고] http://stackoverflow.com/questions/11520728/overflow-yvisible-not-working-when-overflow-xhidden-is-present


[일부 발췌]


After some serious searching it seems i've found the answer to my question:

from: http://www.brunildo.org/test/Overflowxy2.html

In Gecko, Safari, Opera, ‘visible’ becomes ‘auto’ also when combined with ‘hidden’ (in other words: ‘visible’ becomes ‘auto’ when combined with anything else different from ‘visible’). Gecko 1.8, Safari 3, Opera 9.5 are pretty consistent among them.

also the W3C spec says:

The computed values of ‘overflow-x’ and ‘overflow-y’ are the same as their specified values, except that some combinations with ‘visible’ are not possible: if one is specified as ‘visible’ and the other is ‘scroll’ or ‘auto’, then ‘visible’ is set to ‘auto’. The computed value of ‘overflow’ is equal to the computed value of ‘overflow-x’ if ‘overflow-y’ is the same; otherwise it is the pair of computed values of ‘overflow-x’ and ‘overflow-y’.

Short Version:

If you are using visible for either overflow-x or overflow-y and something other than visible for the other. The visible value is interpreted as auto.


original problem -> http://jsfiddle.net/xMddf/1/ (even if I use overflow-y: visible it becomes "auto" and actually "scroll" )

#content {
    height: 100px;
    width: 200px;
    overflow-x: hidden;
    overflow-y: visible;
}

solved -> http://jsfiddle.net/xMddf/2/ (I make a workaround using a wrapper div to apply overflow-x and overflow-y in diferent DOM elements as James Khoury advice about the problem combining visible and hidden on a same DOM element)

#wrapper {
    height: 100px;
    overflow-y: visible;
}
#content {
    width: 200px;
    overflow-x: hidden;

}


해결책도 나와 있는데, 하나의 Element 안에 overflow-x 와 overflow-y 를 같이 넣지 말고, 위와 같이 wrapper 에 overflow-y 를 설정하고, 그 안에 Element 를 하나 더 만들어서 거기서 overflow-x 를 다르게 설정하는 것이다. 내가 해 보니 이렇게만 해서 되지 않고, 그 안에 다시 Element 를 만들어서 

position:absolute;

스타일을 주어야만 했다.

그런데 이렇게 하니 웹브라우저의 상하 크기를 줄이니 footer 태그가 wrapper 안의 contents 와 겹치는 현상이 발생했다.

거기다가 footer 가 웹브라우저의 맨 밑에 붙지 않고, 중간에 뜨는 현상도 발견됐다.


점점 더 제어하기 힘들어지는데, 이것을 해결하는 아주 간단한 방법이 있었다.

overflow-y: auto; 로 설정하는 wrapper Element 에 min-width 스타일을 설정하면 된다.


[CSS]

/*******************************************************************************************************

Layout

*******************************************************************************************************/


/***** Main *****/

.wrap {min-height:100%; width:100%; min-width:980px; display:block; margin-bottom:-87px; overflow-y:auto;}

.header {width:980px; height: 162px; background:url(../image/img_top_v2.jpg) no-repeat 0px 63px; position:relative; margin:0 auto;}


/*** footer *****/

.footer {min-width:1000px; height:86px; background:url("../image/bg_footer.gif") repeat-x 0 center; border-top:1px solid #c8c7c7; margin-top:-86px;}

.footer .wrapper {width:980px; margin:0px auto;}

.footer .copyright {color:#909090;text-align:right; float:right; margin-top:24px}

.footer div.logo {margin:24px 0 0 24px; width:102px;height:43px;background: url("../image/footer_logo.png") no-repeat; text-indent: 100%;overflow: hidden;white-space: nowrap;float:left;}


/*.contents_area*/

.contents_area {position: relative; width: 980px; min-height:440px; margin:0 auto 100px;}


[HTML]
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<script type="text/javascript" th:inline="javascript">
/*<![CDATA[*/
/*
 * 작 성 자 : 강희석
 * 작성일자 : 2013.10.15
 * 설    명 : 모든 서브 화면에서 사용하는 템플릿
 */

/*]]>*/
</script>
<body th:fragment="bodyFragment">

	<div class="wrap">

		<div class="Topbg R"> </div>
		<div class="Topbg L"> </div>

		<!-- header -->
		<div class="header" th:inline="text" th:include="/layout/baseLayout :: commonHeaderFragment"></div>
		<!-- //header -->

		<!-- content -->
		<div class="contents_area" th:inline="text" th:include="${path} :: contentFragment"></div>
		<!--// content -->

	</div>

	<!-- footer -->
	<div class="footer" th:include="/layout/baseLayout :: pageFooterFragment"></div>
	<!-- //footer -->

</body>
</html>




저작자표시

'WEB (HTML, CSS)' 카테고리의 다른 글

전체 공개된 HTML5, CSS3 and JavaScript 자료에 대한 목차  (0) 2014.05.07
부트스트랩(bootstrap)  (0) 2014.05.07
<input type="text" />태그에서 Enter 칠때 웹페이지 reload 되는 현상의 해결법  (4) 2013.12.27
[jquery] 버튼, a태그(하이퍼링크) disable 시키기  (0) 2013.12.27
구버전 IE가 HTML5, CSS3를 알아듣도록 만드는 법  (0) 2013.12.24
공유하기 링크
'WEB (HTML, CSS)' Related Articles more
Comments