DIV @100% Remainder Переменная ширина

У меня есть расширяемое меню, которое выскакивает из тонкой левой панели (открыть меню и закрыть тип меню)

Большинство, если время, это займет около 50px, за исключением случаев, когда он открыт, когда его около 250.

Я хочу, чтобы мой #content div составлял 100% от остатка. Так что его страница 100% - 50px, затем страница 100% -250px, когда меню открывается.

Ниже приведен мой 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| |                                                            ||
||    | |                                                            ||
||    | |                                                            ||
||    | |                                                            ||
||    | |                                                            ||
||----| |------------------------------------------------------------||
|                                                                     |
|---------------------------------------------------------------------|

МЕНЮ ОТКРЫТО

|---------------------------------------------------------------------|
|                    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+"ПВ").

}

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+"ПВ"). }

где

<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">
Источник

2 ответа

Решение

Почему вы не используете свойство 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>
Источник

Использование

<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, на который вы нажимаете, а content - это цель - div, стиль которого вы хотите изменить...

Стоит отметить, что ваш CSS должен иметь начальный отступ в

.content {
padding-left: 75px; 
}

или же он будет изначально загружен как отступ 0px, затем изменится на ширину, на которую вы кликнули, а затем вернется к unclicked... пример ниже

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

так далее и так далее...

Источник
Другие вопросы по тегам