javascript - 计算元素的剩余宽度

Question

我只需要帮助使元素适应 div 的剩余空间，该空间由固定位置元素覆盖。过度简化:我有一个左固定菜单，它占总宽度的 25% 但有一个限制:最大宽度:350 像素和最小宽度:280 像素。我还有一个居中对齐的 div，其宽度为 80%。我想将内容放在第二个 div 中，在 div 接触点和左边距之间。我已经尝试在 div 开始和菜单结束之间放置一个间距 div，(内容占据剩余空间)，但我得出的结论是，由于最小值和最大值，不可能用 css 进行这些计算宽度。 (如果我改变屏幕分辨率，宽度可能会改变，也可能不会)。

我该如何解决这个问题？它的 javascript 是个好主意吗？

Answer 1

我想要么this fiddle或 this fiddle可能会得到你想要的。在任何一种情况下，我都使用伪元素生成一个 float 来分隔它。

#container:before {
    content: '';
    display: block;
    float:left;
    margin-left: -12.5%; /* push float to left edge based on 80% container width */
    width: 31.25%; /* make float 25% of total width based off its 80% container */    
    max-width: 350px;
    min-width: 280px;
    height:100%; /* or 90% in first fiddle */
}

如果您希望它始终保持正确，第二个 fiddle 还在 #content 上设置了 overflow: hidden。两者还需要在 body 和 html 标签上设置 height: 100%。