如何让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适应动态屏幕分辨率？

回答

相关问题