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/