css - DIV @100% 剰余可変幅

Question

細い左側のバーから飛び出す拡張可能なメニューがあります（男性を開いてメニュータイプを閉じる）

大多数の場合、開いているときを除いて、約 50px を占めます。約 250 のときです。

#content div を残りの 100% にしたい。したがって、メニューが開いたときに 100% ページ - 50px、次に 100% ページ -250px になります。

以下は私の HTML です。これを実現するために必要な基本的な CSS は何ですか?

ラッパー内の2divを分離するために、余分な行を入れたことに注意してください

 <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("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">

score 0 · Accepted Answer

使用する

<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) です...

注意すべきことの 1 つは、CSS に開始パディングが含まれている必要があることです。

.content {
padding-left: 75px; 
}

そうしないと、最初に 0px のパディングとしてロードされ、クリックされた幅に変更されてから、クリックされていない幅に戻ります...以下の例

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

などなど...

score 0 · Accepted Answer

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>

css - DIV @100% 剰余 可変幅

2 に答える 2

Related

Reference

css - DIV @100% 剰余可変幅