CSS调整容器大小，而不是导致溢出

Question

我对CSS有基本的了解。

使用溢出并不是很理想。滚动条特定于div，而不是浏览器。因此在手机上显示是一个问题。（特别是iPhone禁用滚动，使内容无法访问）。

图像中显示了可见溢出，显然隐藏的不是我想要的。

那么，是否可以将主div（白色区域）展开以包含div而不是导致溢出。白色部分当前停在屏幕边缘（滚动前）

以Stackoverflow为例。它的中心。只有当你不能包含它时，它才会离屏。但你只需向右滚动即可看到其余部分。我更喜欢以中心为中心。

如果有人知道如何实现这一目标，请告诉我。目前的基本概念是

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

这是ASP.NET MVC 3

Answer 1

这确实很难实现，因为没有CSS方法根据孩子的内容调整父元素的大小，而且在JavaScript中也不是直截了当的。

使用Rune Kaagaards solution to measure text的jQuery有一个解决方案。基本上，迷你脚本会在文本周围创建一个跨度并测量其宽度。然后，您可以使用它来调整容器的大小：

<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>

解决jsfiddle中的问题：http://jsfiddle.net/TUrde/