計算元素的剩餘寬度

我只需要幫助使元素適合div的剩餘空間，即由固定位置元素覆蓋。過度簡化：我有一個左側固定的菜單，它有25％的總寬度，但有一個限制：最大寬度：350px和最小寬度：280px。我也有一箇中心對齊div有80％的寬度。我想把內容放在第二個div中，在div觸碰點和左邊距之間。我已經嘗試在div開始和菜單結束之間放置一個間距div（對於內容佔用剩餘的空間），但是我得出的結論是，使用css進行這些計算是不可能的，因爲min和最大寬度。（如果我改變屏幕水平，寬度可能會改變或不）。計算元素的剩餘寬度

我該如何解決這個問題？它的JavaScript是一個好主意？

來源

2012-07-20 SOMN

指向您網頁的鏈接或顯示您問題的jsfiddle將幫助我們爲您提供幫助。 – 2012-07-20 15:54:31

我認爲薩蒂亞答案解決了這個問題。我現在會嘗試，但無論如何，我想要的是什麼：http://jsfiddle.net/6BTc7/1/ 如果有一種方法可以不使用JavaScript，那麼會更好。 – SOMN 2012-07-20 16:09:13

我覺得無論是this fiddle或this fiddle可能會得到你想要的東西。在任何一種情況下，我使用僞元素來生成一個float來分隔它。

#container:before { 
    content: ''; 
    display: block; 
    float:left; 
    margin-left: -12.5%; /* push float to left edge based on 80% container width */ 
    width: 31.25%; /* make float 25% of total width based off its 80% container */  
    max-width: 350px; 
    min-width: 280px; 
    height:100%; /* or 90% in first fiddle */ 
}

第二小提琴也對#contentoverflow: hidden集，如果你希望它保持正確始終。兩者都需要在body和html標籤上設置height: 100%。

來源

2012-07-20 17:08:16 ScottS

謝謝。在：之前的最大和最小設置，解決它。 – SOMN 2012-07-20 17:20:05

@ Claudiop - 是的，基於80％容器寬度的百分比計算是解決這個問題的關鍵。很高興這是你想要的。 – ScottS 2012-07-20 17:21:46

我應該爲IE7創建一個「fallback」樣式表嗎？：before元素在IE7中無法識別，但它在IE8和9中。我不在乎IE7的很多東西，但總是很好的支持很多人都在使用的瀏覽器。 – SOMN 2012-07-20 17:39:24

-1

，你可以使用這種類型的JavaScript

var a =$('#id of outer div').height(); 
var b = $('#id of inner div').height(); 
var c = a-b; 
$('#id of filling div').css("height",c);

來源

2012-07-20 15:57:18

爲什麼不能用？ var a = $（'＃sidemenu'）。width（）; var b = $（'＃content-container'）。width（）; var c = $（'body'）。width（）; var d = a - （（c-b）/ 2）; $（'＃content'）。css（「width」，d）; – SOMN 2012-07-20 16:18:27

這裏可能是我想你正在計算寬度錯誤。如果你更新jsfiddle中的代碼，並給我鏈接，我可以幫你 – 2012-07-20 16:30:54

http://jsfiddle.net/6BTc7/4/ – SOMN 2012-07-20 16:36:00

計算元素的剩餘寬度

回答

相關問題