Javascript 计算图元的剩余宽度

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

我怎样才能解决这个问题？

---

javascript是个好主意？

您可以使用这种类型的javascript

var a =$('#id of outer div').height();
var b = $('#id of inner div').height();
var c = a-b;
$('#id of filling div').css("height",c);

我想要么这样，要么就可以得到你想要的。在这两种情况下，我都使用伪元素生成一个

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 */
}

---

第二把小提琴还有

溢出：隐藏
设置在
#content
上，如果您希望它始终保持正确。两者都需要在
正文
和
html
标签上设置
高度：100%
。
一个指向您的网页的链接或一个显示您的问题的JSFIDLE将帮助我们帮助您。我想这些答案解决了问题。我现在会尝试，但不管怎样，我想要的是什么：如果有一种不用javascript的方法，那么会更好。为什么这不起作用？变量a=$（“#侧菜单”）.width（）；var b=$（“#内容容器”）.width（）；var c=$（'body'）.width（）；var d=a-（（c-b）/2）$（#content'）.css（“宽度”，d）；这里可能是我猜你计算的宽度错了。如果您在JSFIDLE中更新代码并给我链接，我可以帮助您编辑该文件，忘记我唯一的问题。我不需要知道如何计算宽度，而菜单宽度是一个百分比。我希望能够做到这一点，即使菜单达到最大和最小宽度，这是一个常数。否则，它将无法在越来越小的分辨率下工作，因为内容将位于菜单下，或者将远离菜单。@Claudiop--是的，这和基于80%容器宽度的百分比计算是解决它的关键。很高兴这就是你想要的。我应该为IE7创建一个“后备”样式表吗？IE7中未识别：before元素，但它在IE8和IE9中。我不太关心IE7，但支持很多rtrded用户今天仍然使用的浏览器总是很好的…@Claudiop——你可以，或者你可以使用许多javascript解决方案（）中的一个，使旧浏览器的行为更像新浏览器。