在css中佈局div時混合px和％

我想實現4 div的佈局（screenshot）。菜單應該180px wide和78%（因爲我已經使用了屏幕的其他內容的前21％），屏幕高的，而在field1_top寬度應該是屏幕的其餘部分，它的屏幕height be 38%。間隙間菜單和其他應該1% of screensize。在css中佈局div時混合px和％

我目前最好的解決辦法是：

div.menu{width:180px;height:78%;position:absolute;overflow:auto;left:1%;top:21%} 
div.field1_top{width:84%;height:38%;position:absolute;overflow:auto;left:15%;top:21%} 
div.field1_bottom_left{width:30%;height:38%;position:absolute;overflow:auto;left:15%;top:61%} 
div.field1_bottom_right{width:53%;height:38%;position:absolute;overflow:auto;left:46%;top:61%}

顯然，這將使得「菜單」和其他的div變量之間的差距：在小屏幕尺寸的其他框碰上菜單和大屏幕尺寸的間隙變得太大...

我已經嘗試解決這個問題，用div圍繞表格或像「Issue mixing px and % for responsive layout」這樣的塊級元素。問題我在那裏的是，然後其他div採取他們所需的高度和寬度，他們的內容和增長非常大。但是我不希望屏幕滾動，但是如果它們變得必要的話，可以使用div中的所有滾動條。

這是我的第一個問題，我希望我能夠解釋我可以理解的問題。如果有人能幫助我，我當然會很開心。

來源

2015-05-04 Wooz

您可以使用此解決方案：https://stackoverflow.com/a/1763906/4810983

或者，你可以嘗試calc：https://css-tricks.com/a-couple-of-use-cases-for-calc/ 所以，你會碰到這樣的：

div.field1_top { 
    width:calc(100% - 220px); 
    height:38%; 
    position:absolute; 
    overflow:auto; 
    left:200px; 
    top:21% 
}

來源

2015-05-04 00:46:04 Marek

是的！這看起來正是我需要的。我常常遇到類似的問題 - 但我從未發現過這個功能。我不能相信我總是錯過了這一點，我希望我沒有打擾到別人都清楚的事情。無論如何：非常感謝！ – Wooz

只是爲了更清楚的答案包含2個解決方案：我試着第二個答案與計算函數。我還沒有嘗試過第一種解決方案。 – Wooz

在css中佈局div時混合px和％

回答

相關問題