Wie wird die automatische Breite für das feste untergeordnete div festgelegt, wenn das übergeordnete div die Breite ändert?

Question

$('#toggleSidebar').on('click',function(){ 
 
\t $('body').toggleClass('sidebar-collapse'); 
 
}); 
 
$('#fixedTabHeader').on('click',function(){ 
 
\t $('.mt-tab-wrapper').toggleClass('fixed'); 
 
});

.wrapper{ 
 
    border:1px black solid; 
 
} 
 
.main-header{ 
 
    background-color: #3c8dbc; 
 
    min-height : 50px; 
 
    z-index: 1000; 
 
    position: fixed; 
 
    width: 100%; 
 
} 
 
.main-sidebar{ 
 
    background-color: #222d32; 
 
    z-index: 810; 
 
    
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    padding-top: 50px; 
 
    min-height: 100%; 
 
    width: 230px; 
 
} 
 
.sidebar-collapse .main-sidebar{ 
 
    width: 0; 
 
} 
 
.content-wrapper{ 
 
    border:1px black solid; 
 
    height: 100%; 
 
    z-index: 820; 
 
    padding-top: 50px; 
 
    margin-left: 230px; 
 
} 
 
.sidebar-collapse .content-wrapper{ 
 
    margin-left: 0; 
 
} 
 
.mt-tab-wrapper{ 
 
    position: relative; 
 
} 
 
.mt-tab-header { 
 
    background-color : #fff; 
 
    line-height : 0; 
 
    display: inline-block; 
 
    width : 100%; 
 
    z-index: 1000; 
 
} 
 
.fixed .mt-tab-header{ 
 
    position: fixed; 
 
    top: 50px; 
 
    display:inline-block; 
 
} 
 
.fixed .tab-content{ 
 
    padding-top : 42px; 
 
} 
 
.mt-tab-panel{ 
 
    margin-right: -1px; 
 
    overflow: hidden; 
 
    display: inline-block; 
 
    float: left; 
 
    width: calc(100% - 185px); 
 
} 
 
.mt-tab-panel ul{ 
 
    width: 10000px; 
 
} 
 
.mt-tab-tools-left{ 
 
    display: inline-block; 
 
    float : left; 
 
} 
 
.mt-tab-tools-right{ 
 
    display: inline-block; 
 
    float: right; 
 
} 
 
.mt-tab-tools-right ul{ 
 
    padding-left: 5px; 
 
} 
 
}

<link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet"/> 
 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<div class="wrapper"> 
 
    <!-- Main Header --> 
 
    <header class="main-header"> 
 
     <button id="toggleSidebar">toggle sidebar</button> 
 
     <button id="fixedTabHeader">fixed tab header</button> 
 
    </header> 
 
    <!-- Left side column. contains the logo and sidebar --> 
 
    <aside class="main-sidebar"> 
 
    </aside> 
 
    <!-- Content Wrapper. Contains page content --> 
 
    <div class="content-wrapper"> 
 
     <div class="mt-tab-wrapper" > 
 
      <div class="mt-tab-header " > 
 
       <div class="mt-tab-tools-left">   
 
        <ul class="nav nav-tabs">    
 
         <li class="mt-move-left"><a><i class="fa fa-backward"></i></a></li>   
 
        </ul>  
 
       </div> 
 
       <nav class="mt-tab-panel" > 
 
        <ul class="nav nav-tabs"> 
 
         <li class="active"><a href="#test_tab_1"> Tab 1 </a></li> 
 
         <li><a href="#test_tab_2"> Tab 2 </a></li> 
 
         <li><a href="#test_tab_3"> Tab 3 </a></li> 
 
         <li><a href="#test_tab_4"> Tab 4 </a></li> 
 
         <li><a href="#test_tab_5"> Tab 5 </a></li> 
 
         <li><a href="#test_tab_6"> Tab 6 </a></li> 
 
         <li><a href="#test_tab_7"> Tab 7 </a></li> 
 
         <li><a href="#test_tab_8"> Tab 8 </a></li> 
 
         <li><a href="#test_tab_9"> Tab 9 </a></li> 
 
         <li><a href="#test_tab_10"> Tab 10 </a></li> 
 
         <li><a href="#test_tab_11"> Tab 11 </a></li> 
 
         <li><a href="#test_tab_12"> Tab 12 </a></li> 
 
         <li><a href="#test_tab_13"> Tab 13 </a></li> 
 
         <li><a href="#test_tab_14"> Tab 14 </a></li> 
 
         <li><a href="#test_tab_15"> Tab 15 </a></li> 
 
         <li><a href="#test_tab_16"> Tab 16 </a></li> 
 
         <li><a href="#test_tab_17"> Tab 17 </a></li> 
 
         <li><a href="#test_tab_18"> Tab 18 </a></li> 
 
         <li><a href="#test_tab_19"> Tab 19 </a></li> 
 
         <li><a href="#test_tab_20"> Tab 20 </a></li> 
 
         <li><a href="#test_tab_21"> Tab 21 </a></li> 
 
         <li><a href="#test_tab_22"> Tab 22 </a></li> 
 
         <li><a href="#test_tab_23"> Tab 23 </a></li> 
 
         <li><a href="#test_tab_24"> Tab 24 </a></li> 
 
         <li><a href="#test_tab_25"> Tab 25 </a></li> 
 
        </ul> 
 
       </nav> 
 
       <div class="mt-tab-tools-right">   
 
        <ul class="nav nav-tabs">    
 
         <li class="mt-move-right"><a><i class="fa fa-forward"></i></a></li>    
 
         <li class="mt-dropdown-option dropdown">     
 
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Option<span class="caret"></span></a> 
 
          <ul role="menu" class="dropdown-menu dropdown-menu-right">      
 
           <li class="mt-show-actived-tab"><a>Show Activated Tab</a></li>      
 
           <li class="divider"></li>      
 
           <li class="mt-close-all-tabs"><a>Close All Tabs</a></li>      
 
           <li class="mt-close-other-tabs"><a>Close Other Tabs</a></li>     
 
          </ul>    
 
         </li>   
 
        </ul>  
 
       </div> 
 
      </div> 
 
      <div class="tab-content" > 
 
       <div class="tab-pane active" id="test_tab_1"> 
 
        <h1>Demo page</h1><h2>This is a demo page :) </h2> 
 
        This is the content! <br/> 
 
        This is the content! <br/> 
 
        This is the content! <br/> 
 
        This is the content! <br/> 
 
        This is the content! <br/> 
 
        This is the content! <br/> 
 
        This is the content! <br/> 
 
        This is the content! <br/> 
 
        This is the content! <br/> 
 
        This is the content! <br/> 
 
        This is the content! <br/> 
 
        This is the content! <br/> 
 
        This is the content! <br/> 
 
        This is the content! <br/> 
 
        This is the content! <br/> 
 
        This is the content! <br/> 
 
        This is the content! <br/> 
 
        This is the content! <br/> 
 
        This is the content! <br/> 
 
        This is the content! <br/> 
 
        This is the content! <br/> 
 
        This is the content! <br/> 
 
        This is the content! <br/> 
 
        This is the content! <br/> 
 
        This is the content! <br/> 
 
        This is the content! <br/> 
 
        This is the content! <br/> 
 
        This is the content! <br/> 
 
        This is the content! <br/> 
 
        This is the content! <br/> 
 
        This is the content! <br/> 
 
        This is the content! <br/> 
 
        This is the content! <br/> 
 
        This is the content! <br/> 
 
        This is the content! <br/> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
    <!-- /.content-wrapper --> 
 
</div>

ich eine Probe haben in jsfiddle

ich ein Nav Tabs für mein Projekt zu machen, dann ist es ein Multi Registerkarten Seite. Wenn ich den Nav-Header repariere und die Sidebar öffne/schließe, hat der Nav-Header keine automatische Breite, er wird nach rechts geschoben.

Wie kann ich es automatisch Breite mit CSS einstellen?

Answer 1

Schließlich fand ich eine akzeptable Lösung finden Sie in jsfiddle

ich die mt-tab-tools-right fixiert und legte es right : 0;. Es ist nicht die perfekte Lösung, aber akzeptabel. Wenn jemand etwas besseres hat, lass es mich wissen.

.fixed .mt-tab-tools-right{ position: fixed; right: 0; background-color : #fff; }

Answer 2

Ich habe Ihre neueste jsfiddle zum experimentieren verwendet, Sie waren sehr, sehr nah an der Lösung!

Arbeitslösung:

.fixed .mt-tab-header{ 
    position: absolute; 
    display:inline-block; 
} 

Warum es mit festen nicht funktioniert?

position: fixed respektiert nicht das Elternelement und wird daher seine Position außer Kraft setzen, wodurch effektiv Platz außerhalb des Körpers genommen wird. position: absolute ist relativ zu seinem Elternteil und respektiert daher seine Grenzen.

Das ist meine Vermutung, wenn ich nicht völlig richtig bin, bitte fühlen Sie sich frei, mich zu korrigieren :)!