Question

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

我该如何解决这个问题？它的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 */
}

如果您希望它始终保持正确，那么第二个小提琴也会在overflow: hidden上设置#content。两者还需要在height: 100%和body标记上设置html。

Answer 2

你可以使用这种类型的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);

计算元素的剩余宽度

2 个答案: