如何讓div適應動態屏幕分辨率？

我需要3個div，其中1設置爲1000px的寬度，並位於頁面中間，其他2應該填充主div的左側和右側的屏幕寬度。我希望這可以在所有屏幕分辨率下工作，但我無法找到實現它的方式。如何讓div適應動態屏幕分辨率？

到目前爲止我的代碼（我用色彩作爲視覺輔助） -

CSS：

#leftside { background: red; float: left; width: 100%; position: relative; width: 100%; } 
#rightside { background: blue; float: left; width: 100%; position: relative; } 
#container { background: yellow; float: left; width: 1000px; position: relative; }

HTML：

<html> 
<body> 
<div id="leftside">&nbsp;</div> 
<div id="container">the content</div> 
<div id="rightside">&nbsp;</div> 
...

到目前爲止，這是行不通的。我如何讓「左邊」和「右邊」div自動適應屏幕分辨率的剩餘部分 - 對於任何屏幕分辨率？

感謝您的幫助。

來源

2013-03-02 Eyal Binehaker

你可以用CSS這樣

#maindiv{ 

    width:1000px; 
    } 

    #rightdiv, #leftdiv{ 

    width:calc((100%-1000)/2); 
    } 
    #rightdiv{ 

    //other styles 
    } 
    #leftdiv{ 

    //other styles 
    }

爲calc()

來源

2013-03-02 09:53:12

：所有瀏覽器支持：calc（）選項？ – 2013-03-02 10:11:48

其答案@Roman C – 2013-03-02 10:14:11

一種方法是將div放入一行一格和三格的表格中。表格寬度爲100％，您可以設置中心寬度td。

我相信有人會在CSS中提出更好的方法。

來源

2013-03-02 09:09:49 SteveP

感謝測試瀏覽器支持achive，我真的希望避免與

元素設計。 – 2013-03-02 09:11:57

你必須注入一些JavaScript代碼：

$content = $('.content'); 
$sidebar = ($(window).width() - $content.width())/2; 
$('.leftside').css('width', $sidebar); 
$('.rightside').css('width', $sidebar);

See demo

然後使用media queries改變中間div的寬度時，屏幕變小。

來源

2013-03-02 09:19:39 Michelle

太棒了！謝謝:-) – 2013-03-02 09:21:43

沒問題，你可以接受它作爲答案，如果它解決了你的問題;） – Michelle 2013-03-02 09:26:07

相關問題

如何讓div適應動態屏幕分辨率？

回答

相關問題