Css 如何使div调整到动态屏幕分辨率？

我需要有3个div，其中1个设置为1000 px的宽度，在页面的中间，另外2个应该从主div的左边和右边填充屏幕宽度。我希望这能在所有屏幕分辨率上工作，但是我找不到办法去做。

到目前为止，我的代码（我使用颜色作为视觉辅助）——

css:

html:

内容
...

到目前为止，它还不起作用。如何使“leftside”和“rightside”div自动调整到屏幕分辨率中剩余的内容-对于任何屏幕分辨率

---

谢谢您的帮助。

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

---

我相信有人会建议更好的CSS方式。

您必须注入一些javascript代码：

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

---

然后，当屏幕变小时，使用更改中间

div

的宽度。

您可以通过css来实现这一点

 #maindiv{

    width:1000px;
    }

    #rightdiv, #leftdiv{ 

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

    //other styles
    }
    #leftdiv{

    //other styles
    }

---

测试浏览器对

的支持谢谢，我真的希望避免使用元素进行设计。没问题，如果它解决了您的问题，您可以接受它作为答案；）所有浏览器都支持：calc（）选项吗？

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

 #maindiv{

    width:1000px;
    }

    #rightdiv, #leftdiv{ 

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

    //other styles
    }
    #leftdiv{

    //other styles
    }