CSS來調整容器大小，而不是導致溢出

使用溢出並不是很理想。滾動條是特定於div的，而不是瀏覽器。因此，在手機上顯示是一個問題（特別是禁用滾動功能的iPhone，導致內容無法訪問）。

圖像中顯示可見溢出，顯然隱藏不是我想要的。

那麼，是否有可能使主div（白色區域）展開以包含div而不是導致溢出。白色部分當前停在屏幕邊緣（滾動前）

以Stackoverflow爲例。它的中心。只有當你不能容納它時，它纔會離開屏幕。但是你只需向右滾動看看其餘部分。我更喜歡我的中心。

如果有人知道如何做到這一點，請讓我知道。在目前的基本概念是

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

enter image description here

這是ASP.NET MVC 3

來源

2012-01-13 Doomsknight

你有一個鏈接到一個示例頁面？ – James 2012-01-13 17:11:18

這的確是相當棘手的實現，因爲沒有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/

來源

2012-01-13 18:54:28 Parzifal

CSS來調整容器大小，而不是導致溢出

回答

相關問題