当父div更改宽度时，如何为固定的子div设置自动宽度？

debugcn 发表于 Dev

许冠文

$('#toggleSidebar').on('click',function(){
	$('body').toggleClass('sidebar-collapse');
});
$('#fixedTabHeader').on('click',function(){
	$('.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>

我在jsfiddle中做了一个样本

我为我的项目制作了一个Nav标签，这是一个多标签页面。当我固定导航头并打开/关闭侧边栏时，导航头不是自动宽度，它将被向右推出。

如何使用CSS设置自动宽度？

许冠文

最后，我找到了一个可接受的解决方案，请参阅jsfiddle

我mt-tab-tools-right把它固定好了right : 0;。这不是完美的解决方案，但可以接受。如果有人有更好的东西，请告诉我。

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。