DIV @ 100％剩余可变宽度

Question

我有可膨胀的菜单，其中由薄的左手栏弹出（开放男性和关闭菜单类型）

多数如果时间，它会占用周围50像素，除了当它打开时，当它的约250.

我希望我的＃内容div是100％的余数。因此，当它打开菜单时，它的100％页面 - 50px然后是100％页面-250px。

贝娄是我的HTML，我需要做什么我的基本CSS？

注我已经把关节外线路，独立出来的2divs indside包装

<div class="wrapper"> 

。

​​

。

<div class="content"> 
<p>CONTENT HERE</p> 
</div> 

。

</div> 

图相救......

式菜单关闭

|---------------------------------------------------------------------| 
|     THIS IS THE #WRAPPER DIV @100%     | 
||----| |------------------------------------------------------------|| 
|| | |               || 
|| | |               || 
||THIS| |   THIS IS THE #CONTENT DIV       || 
||IS | |   @100%            || 
||THE | |               || 
||SIDE| |               || 
||-BAR| |               || 
||DIV | |               || 
||@ | |               || 
||20px| |               || 
|| | |               || 
|| | |               || 
|| | |               || 
|| | |               || 
||----| |------------------------------------------------------------|| 
|                  | 
|---------------------------------------------------------------------| 

菜单中打开

|---------------------------------------------------------------------| 
|     THIS IS THE #WRAPPER DIV @100%     | 
||--------------| |--------------------------------------------------|| 
||    | |             || 
||    | |             || 
||THIS   | |   THIS IS THE #CONTENT DIV    || 
||IS   | |   @100%         || 
||THE   | |             || 
||SIDE   | |             || 
||-BAR   | |             || 
||DIV   | |             || 
||@    | |             || 
||250   | |             || 
||px   | |             || 
||    | |             || 
||    | |             || 
||    | |             || 
||--------------| |--------------------------------------------------|| 
|                  | 
|---------------------------------------------------------------------| 

这是代码我一直在测试

function menushow() 
{ 
screen_width = $(window).width() ; // returns width of browser viewport 
//alert($(document).width()); // returns width of HTML document 

//calculate content div width 
cont_div_width = screen_width - 250; 

（“#content”）。css（“width”，cont_div_width +“px”）;

} 

function menuhide() 
{ 

screen_width = $(window).width() ; // returns width of browser viewport 
//alert($(document).width()); // returns width of HTML document 

//calculate content div width 
cont_div_width = screen_width - 50; 

（“#content”）。css（“width”，cont_div_width +“px”）; }

其中

<a href="#" onclick="menuhide"><div id="logo" class="logo"></div></a> 

和

<a href="#" onclick="menushow"><div id="logo" class="logo"></div></a> 

和

<div id="content" class="content"> 

Answer 1

你为什么不充分利用屏幕/ DOC width属性的？

使用jQuery http://api.jquery.com/width/

function menushow() 
{ 
    screen_width = $(window).width() ; // returns width of browser viewport 
    //alert($(document).width()); // returns width of HTML document 

    //calculate content div width 
    cont_div_width = screen_width - 250; 

    ("#idofcontent_div").css("width",cont_div_width+"px"); 


} 

function menuhide() 
{ 

    screen_width = $(window).width() ; // returns width of browser viewport 
    //alert($(document).width()); // returns width of HTML document 

    //calculate content div width 
    cont_div_width = screen_width - 50; 

    ("#idofcontent_div").css("width",cont_div_width+"px"); 
} 

类似的东西。希望这可以帮助你

或使用JavaScript http://www.w3schools.com/jsref/prop_screen_width.asp

<script> 
screen_width = screen.width; 
</script> 

Answer 2

使用

<script language="JavaScript"> 
onload=function(){ 
var login=document.getElementById('logo'); 
var target=document.getElementById('content'); 
login.onclick=function(){ 
target.style.paddingLeft=target.style.paddingLeft=='260px'?'75px':'260px'; 
} 
} 
</script> 

其中标志是你点击的div id和内容是目标 - 的div你想要的风格改变...

一件事不e是你的CSS应该开始填充在

.content { 
padding-left: 75px; 
} 

否则将首先装载的0像素填充然后换你的点击宽度再回到未点击...下面的例子

0px -> 260px -> 75px -> 260px -> 75px -> 260px -> 75px -> 260px -> 75px -> 

等等等等......