2012-01-13 3 views
1

CSS에 대한 기본 지식이 있습니다.CSS는 오버플로가 아닌 컨테이너의 크기를 조정합니다.

오버 플로우를 사용하면 정말 이상적입니다. 스크롤 막대는 브라우저가 아닌 div에 한정됩니다. 따라서 휴대 전화에 표시하는 것은 문제입니다 (특히 스크롤 할 수 없게하는 콘텐츠를 사용할 수없는 iPhone).

보이는 부분에 오버플로가있는 것은 이미지에 표시되며 분명히 숨겨져 있습니다.

그래서 주 div (흰색 영역)가 div가 포함되도록 확장하여 오버플로를 일으킬 수 있습니까? 흰색 부분은 현재 화면 가장자리에서 멈 춥니 다 (예 : 스크롤하기 전)

예를 들어 Stackoverflow를 사용하십시오. 그 중심. 당신이 그것을 담을 수 없을 때만, 그것은 화면을 벗어나게됩니다. 그러나 단순히 나머지를 보러 오른쪽 스크롤. 나는 중심에 두는 것을 훨씬 좋아한다.

누구든지이 작업을 수행하는 방법에 대해 알고 있다면 알려 주시기 바랍니다. 순간 기본 개념이이가에 따라 부모 요소의 크기를 조정 할 CSS 방법이 없기 때문에 달성하기 위해 실제로 매우 까다 롭습니다 ASP.NET MVC 3

+0

당신은 예를 들어 페이지에 대한 링크가 있습니까 : jsfiddle에서 문제에 대한

<script type="text/javascript"> $(function() { //define the mini-function to measure text $.fn.textWidth = function(){ var html_org = $(this).html(); var html_calc = '<span>' + html_org + '</span>' $(this).html(html_calc); var width = $(this).find('span:first').width(); $(this).html(html_org); return width; }; //now resize your main container according to the body width. $("#main").css("width", $("#body").textWidth()); //this would be body + sidebar // $("#main").css("width", $("#body").textWidth()+$("#sidebar").textWidth()); }); </script> 

해결 방법 : 다음 컨테이너의 크기를 조정하는 데 사용할 수 있습니다? – James

답변

1

입니다

<div id="main"> 
    <div id="sidebar"></div> 
    <div id="body"></div> 
</div> 

enter image description here

그들의 아이들의 콘텐츠, 그리고 자바 스크립트에서도 똑바르지 않습니다.

Rune Kaagaards solution to measure text을 사용하는 jQuery로 해결할 수있는 방법이 있습니다. 기본적으로 미니 스크립트는 텍스트 주위에 스팬을 만들고 너비를 측정합니다. http://jsfiddle.net/TUrde/

관련 문제