我可以將div調整爲另一個div的最小寬度嗎？

我有兩個div，一次用於主頁內容，另一個用於側欄。我可以將div調整爲另一個div的最小寬度嗎？

兩者都將寬度設置爲百分比，因此如果窗口大小調整，它們將保持其比例。然而，側邊欄有一個最小寬度，因爲該內容只能在開始看起來破碎之前調整太多。當窗口的大小調整到最小寬度時，邊欄開始佔用主頁面內容，因爲主頁面內容不知道它現在需要佔用比定義的帳戶更小的百分比爲側邊欄。我試圖做到這一點，當我們有足夠的寬度時，主要內容和側邊欄可以保持各自的比例，但是當我們到了側邊欄內容開始看起來破損的時候，主要內容會調整其寬度更多來補償。

有沒有辦法做到這一點與CSS/HTML，或我需要編寫一些JavaScript來計算新的寬度和動態調整樣式表中的值？

這裏是什麼，我有一個（簡體）例如：

HTML：

<div id="maincontent"> 
    <!-- Main page content here --> 
</div> 

<div id="sidebar"> 
    <!-- Sidebar content --> 
</div>

CSS：

#maincontent 
{ 
    width: 85%; 
} 

#sidebar 
{ 
    width: 15%; 
    min-width: 120px; 
}

在這個例子中，一切都會好起來的，是長因爲瀏覽器窗口寬度超過800像素。但是一旦我們降到800像素以下，主要內容現在需要變得小於85％，以彌補120px超過瀏覽器寬度15％的事實。

來源

2012-08-02 Blobinator

你可以嘗試

@media all and (max-size: 800px) { 
    #maincontent { width: 75%; } 
}

當然

，更換800像素和75％的適合

來源

2012-08-02 15:29:00 Xhynk

我沒有讀這個答案（和隨後將其輸入到谷歌）之前知道關於@media查詢。有了一些修補，這應該很好地服務於我的目的。謝謝！ – Blobinator 2012-08-02 15:42:28

我的榮幸！ @media查詢是一個很棒的工具，但它們不適用於舊版本的IE：/。請記住，您可以設置最小和最大尺寸！語法是@media all和（min-size：600px）和（max-size：800px）' - 然後開始下一個，最大尺寸爲599px。祝你好運！ – Xhynk 2012-08-02 15:49:00

屏幕尺寸和百分比這是你在找什麼？

CSS

#maincontent{ 
background-color:orange; 
} 

#sidebar 
{ 
background-color:blue; 
width:15%; 
min-width:120px; 
float:left; 
}

HTML

<div id="sidebar"> 
I am the sidebar! 
</div> 

<div id="maincontent"> 
I am the main content! 
</div>

DEMO：http://jsfiddle.net/HFuCe/30/

來源

2012-08-02 15:41:26 Dom

我可以將div調整爲另一個div的最小寬度嗎？

回答

相關問題