css - DIV @100% Remainder 可变宽度

Question

我有一个可扩展的菜单，它从一个细长的左侧栏中弹出(打开菜单和关闭菜单类型)

大多数情况下，它会占用大约 50px，打开时除外，大约 250。

我希望我的#content div 占剩余部分的 100%。所以当菜单打开时，它的 100% 页面 - 50px 然后 100% 页面 -250px。

下面是我的 HTML，我需要什么基本 CSS 来实现这一点？

注意 我已经放入了额外的行，以将包装内的 2divs 分开

 <div class="wrapper">

.

 <div class="sidebar" id="sidebar">
<a href="#" onclick="return showOrHide('menulink');"><div class="logo"></div></a>
<ul id="menulink">
    <li>
        <a href="#">Campaigns</a>
        <ul class="submenu">
            <li><a href="http://insideclients.co.uk/Summary.aspx">Summary Sheet</a></li>
            <li><a href="http://insideclients.co.uk/Clients.aspx">Add New Client</a></li>
            <li><a href="http://insideclients.co.uk/Search.aspx">Search Historic</a></li>                
        </ul>
    </li>
    <li>
        <a href="#">Transactions</a>
        <ul class="submenu">
            <li><a href="http://insideclients.co.uk/Links.aspx">Record Transaction</a></li>
            <li><a href="http://insideclients.co.uk/LinksSummary.aspx">Transaction Sheet</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Production</a>
        <ul class="submenu">
            <li><a href="http://insideclients.co.uk/ProductionHandover.aspx">Create Handover</a></li>
            <li><a href="http://insideclients.co.uk/ProductionHandoverSearch.aspx">Handover Sheets</a></li>
            <li><a href="http://insideclients.co.uk/ProductionHandoverSummary.aspx">Production Overview</a></li>                
        </ul>
    </li>
    <li>
        <a href="#">Reporting</a>           
        <ul class="submenu">
            <li><a href="http://insideclients.co.uk/SummaryAltView.aspx">Transaction Report</a></li>
            <li><a href="http://insideclients.co.uk/LinksSummary.aspx?CampaignID=95">View Team Costs</a></li>
        </ul>
    <li>
        <a href="#">Admin</a>           
        <ul class="submenu">
            <li><a href="http://insideclients.co.uk/Users.aspx">Manage Users</a></li>
            <li><a href="#">Log Out</a></li>
        </ul>
    </li>
</ul>
 </div>

.

 <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("宽度",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("宽度",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

为什么不使用屏幕/文档宽度属性？

使用 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>