Html 响应性设计：在流体设计中使用像素宽度div

设置：

我有一个侧边栏和一个主要内容栏。侧边栏有33%的宽度，主要内容有一个像素宽度，填满了空间的其余部分。我希望主要内容保持固定宽度，直到达到某个媒体查询断点并变小。所以基本上我只希望边栏随着窗口的大小而缩小，直到断点

这听起来对我来说应该很简单，但我有问题。当我缩小窗口时，侧边栏的收缩速度不够快，主要内容会掉到它下面。我想这是因为，由于主要内容没有缩小，它的px宽度在屏幕上所占的比例越来越高，而侧边栏总是占33%

我觉得有一些简单的解决办法，但我想不出来。有什么想法吗

谢谢，女士们，先生们

概述 如果您将内容框设置为67%，并注释掉div之间的空白，那么它应该可以工作

我还添加了

框大小：边框框因为这样你可以添加填充，而不会添加到总宽度上

这不适用于页边距，必须使用页边距百分比，以便页边距+宽度=100%，才能与页边距正确匹配

背景色仅用于展示div的外观

以下是一个例子：

HTML:

<div id='container'>
<div class='sidebar'>
    Sidebar Test
</div><!--
--><div class='content'>
    Content Test
</div><!--
--></div>
​

.sidebar
{
display:inline-block;
width:33%;
box-sizing:border-box;    
background-color:#09f;
}

.content
{
display:inline-block;
width:67%;
box-sizing:border-box;    
background-color:#0F9;
}

概述
如果您将内容框设置为67%，并注释掉div之间的空白，那么它应该可以工作

我还添加了
框大小：边框框因为这样你可以添加填充，而不会添加到总宽度上

这不适用于页边距，必须使用页边距百分比，以便页边距+宽度=100%，才能与页边距正确匹配

背景色仅用于展示div的外观

以下是一个例子：

HTML:

<div id='container'>
<div class='sidebar'>
    Sidebar Test
</div><!--
--><div class='content'>
    Content Test
</div><!--
--></div>
​

.sidebar
{
display:inline-block;
width:33%;
box-sizing:border-box;    
background-color:#09f;
}

.content
{
display:inline-block;
width:67%;
box-sizing:border-box;    
background-color:#0F9;
}

我想出来了

我不得不停止试图填满整个屏幕。考虑到人们的屏幕比我大，这是毫无意义的。因此，我没有在内容上留一个右边距（我没有提到）来填充剩余的空间，而是将其向左浮动。现在，我将在侧边栏上放置一个最大宽度，并在调整大小时对内容框进行媒体查询。
我找到了答案

我不得不停止试图填满整个屏幕。考虑到人们的屏幕比我大，这是毫无意义的。因此，我没有在内容上留一个右边距（我没有提到）来填充剩余的空间，而是将其向左浮动。现在，我将在侧边栏上放置一个“最大宽度”，并在调整大小时对内容框进行媒体查询。
Hey。有JSFIDLE或代码示例吗？你可以试着在主要内容上使用%，但添加像素的最大和最小宽度？嘿。有JSFIDLE或代码示例吗？您可以尝试在主内容上使用%，但添加以像素为单位的最大和最小宽度？但我希望主内容div为固定宽度。这就是重点。不过还是要谢谢你的盒子尺寸提示。我没听说过。@Brimby你希望宽度是多少？@Brimby你什么时候希望内容变小，变小时应该是多大？但我希望主内容div的宽度是固定的。这就是重点。不过还是要谢谢你的盒子尺寸提示。我没听说过。@Brimby你希望宽度是多少？@Brimby你什么时候希望内容变小，变小时应该是多大？