100％布局，最小/最大尺寸不会溢出

Question

我有两个布局元素，一个是33％，另一个是66％。它们都使用我的屏幕尺寸的100％（因此它取决于浏览器窗口）。较小的元素也具有最小尺寸属性，因此它不能低于250px;

现在，如果布局的大小至少为757px（因此min属性不适用的大小），一切看起来都很好。如果布局低于757px，则第二个元素开始溢出，因为它仍然需要66％，因此两个布局的总和超过了100％。

我做了一些图片来显示行为：

布局1000px没有溢出：

布局500px溢出

是否存在防止溢出（不溢出：隐藏）的解决方案，因此当第一个元素达到最小宽度时，第二个元素仅占用剩余空间。 此外，JavaScript不应过度使用！

此致，Stefan

Answer 1

尝试将以下内容用于第二个小部件：

position: fixed;
right: 0;

Answer 2

当然，这实际上非常简单，只需要极少量的代码：

HTML：

<div class="sidebar">
...
</div>
<div class="content">
...
</div>

CSS：

.sidebar{ 
    float: left;
    width: 33%;
}
.content { 
    overflow: hidden; /* Ensures that your content will not overlap the sidebar */
}

您可以在此处查看现场演示：http://jsfiddle.net/7A4Tj/

编辑：

如果您正在尝试为侧边栏和内容实现具有相等高度背景图像的网站布局，则您需要做的就是将这些元素包装在包含div中并使用Faux Columns技术。

Answer 3

这是我的五美分

两个div上的min-width 还有一个包含最小宽度的包装器，以及两个具有百分比宽度的div

JS fiddle code

PS似乎在IE8中运行良好

PPS如果你想在不同的窗口大小上拥有条件CSS规则，也可以查看@media查询，可能会有所帮助。将在支持CSS3的浏览器上运行：CSS Media queries at CSS Tricks