Question

我有一个可扩展的菜单，从一个细左手栏弹出（打开的男人和关闭菜单类型）

如果时间多数，它将占用大约50px，除非它打开时，大约250p。

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

Bellow是我的HTML，我需要做出的基本CSS是什么？

注意我已将exra行放入，将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| |                                                            ||
||    | |                                                            ||
||    | |                                                            ||
||    | |                                                            ||
||    | |                                                            ||
||----| |------------------------------------------------------------||
|                                                                     |
|---------------------------------------------------------------------|

MENU OPEN

|---------------------------------------------------------------------|
|                    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;

（ “＃内容”）的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;

（ “＃内容”）的CSS（ “宽度”，cont_div_width + “像素”）。 }

，其中

<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

为什么不使用screen / 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 ...

需要注意的一件事是你的CSS应该在

中有开始填充

.content {
padding-left: 75px; 
}

或者它最初将加载为0px填充然后更改为您单击的宽度然后返回到未单击的...下面的示例

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

等等......

DIV @ 100％剩余可变宽度

2 个答案: