Question

我需要有3个div，其中1个设置为1000px的宽度并且位于页面的中间，另外2个应该填充主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自动调整到屏幕分辨率中剩余的 - 对于任何屏幕分辨率？

感谢您的帮助。

Answer 1

你可以用css

做到这一点

 #maindiv{

    width:1000px;
    }

    #rightdiv, #leftdiv{ 

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

    //other styles
    }
    #leftdiv{

    //other styles
    }

测试calc()的浏览器支持

Answer 2

你必须注入一些javascript代码：

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

See demo

然后在屏幕变小时使用media queries更改中间div的宽度。

Answer 3

一种方法是将div放在一个包含一行和三个单元格的表中。该表的宽度为100％，您可以设置中心td的宽度。

我确信有人会在CSS中提出更好的方法。

如何让divs适应动态屏幕分辨率？

3 个答案: