Html 我可以将一个div调整为另一个div'；最小宽度是多少？

我有两个div，一个用于主页内容，另一个用于侧边栏

两者的宽度都设置为百分比，因此如果调整窗口大小，它们将保持其比例。但是，侧边栏有一个最小宽度，因为在内容开始看起来破损之前，它只能调整这么多大小。当窗口的大小调整到最小宽度时，侧边栏开始侵占主页内容，因为主页内容不知道它现在需要占用的百分比比为侧边栏定义的百分比小。我试图这样做，当我们有足够的宽度时，主内容和侧边栏可以保持各自的比例，但当我们达到侧边栏内容开始看起来破损的程度时，主内容会调整其宽度以进行补偿

有没有办法用css/html实现这一点，或者我需要编写一些JavaScript来计算新的宽度并动态调整样式表中的值

下面是一个（简化的）示例：

HTML:

在本例中，只要浏览器窗口的宽度大于800px，一切都将正常。但是，一旦我们降至800px以下，主内容现在需要小于85%，以弥补120px超过浏览器宽度15%的事实。

您可以尝试

@media all and ( max-size: 800px )  {
    #maincontent { width: 75%; }
}

---

当然，用合适的屏幕尺寸和百分比替换800px和75%

这就是您想要的吗

CSS

HTML

我是侧边栏！
我是主要内容！

---

演示：

在阅读此答案（随后将其输入谷歌）之前，我不知道@media查询。通过一些修补，这应该很好地满足我的目的。谢谢我的荣幸@媒体查询是一个很棒的工具，尽管它们在旧版本的IE:/中不起作用。请记住，您可以设置最小和最大尺寸！语法为

@media all and（最小尺寸：600px）和（最大尺寸：800px）

-然后以最大尺寸599px启动下一个。祝你好运

#maincontent
{
    width: 85%;
}

#sidebar
{
    width: 15%;
    min-width: 120px;
}

@media all and ( max-size: 800px )  {
    #maincontent { width: 75%; }
}

#maincontent{
 background-color:orange;  
 }

 #sidebar
 {
 background-color:blue; 
 width:15%;
 min-width:120px;
 float:left;
 }

<div id="sidebar">
 I am the sidebar!
</div>

 <div id="maincontent">
 I am the main content!
 </div>