CSS для изменения размера контейнера, а не для переполнения

Question

У меня есть базовые знания CSS.

Использование переполнения не является идеальным.Полосы прокрутки являются специфическими для div, а не для браузера.Так что отображение на телефонах - это проблема (особенно iPhone, который отключает прокрутку, оставляя контент недоступным).

Наличие переполнения на видимом изображении показано на изображении, и, очевидно, скрыто не то, что я хочу.

Итак, можно ли развернуть основной 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 решение для измерения текста .По сути, мини-скрипт создает промежуток вокруг вашего текста и измеряет его ширину.Затем вы можете использовать его для изменения размера вашего контейнера:

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