计算元素的剩余宽度

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

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

来源

2012-07-20 SOMN

指向您网页的链接或显示您问题的jsfiddle将帮助我们为您提供帮助。 – 2012-07-20 15:54:31

我认为萨蒂亚答案解决了这个问题。我现在会尝试，但无论如何，我想要的是什么：http://jsfiddle.net/6BTc7/1/ 如果有一种方法可以不使用JavaScript，那么会更好。 – SOMN 2012-07-20 16:09:13

我觉得无论是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 */ 
}

第二小提琴也对#contentoverflow: hidden集，如果你希望它保持正确始终。两者都需要在body和html标签上设置height: 100%。

来源

2012-07-20 17:08:16 ScottS

谢谢。在：之前的最大和最小设置，解决它。 – SOMN 2012-07-20 17:20:05

@ Claudiop - 是的，基于80％容器宽度的百分比计算是解决这个问题的关键。很高兴这是你想要的。 – ScottS 2012-07-20 17:21:46

我应该为IE7创建一个“fallback”样式表吗？：before元素在IE7中无法识别，但它在IE8和9中。我不在乎IE7的很多东西，但总是很好的支持很多人都在使用的浏览器。 – SOMN 2012-07-20 17:39:24

-1

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

来源

2012-07-20 15:57:18

为什么不能用？ var a = $（'＃sidemenu'）。width（）; var b = $（'＃content-container'）。width（）; var c = $（'body'）。width（）; var d = a - （（c-b）/ 2）; $（'＃content'）。css（“width”，d）; – SOMN 2012-07-20 16:18:27

这里可能是我想你正在计算宽度错误。如果你更新jsfiddle中的代码，并给我链接，我可以帮你 – 2012-07-20 16:30:54

http://jsfiddle.net/6BTc7/4/ – SOMN 2012-07-20 16:36:00

计算元素的剩余宽度

回答

相关问题