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 中也不是直截了当的。

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

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