$('#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做了一个 sample
我为我的元素制作了一个 Nav 标签，它是一个多标签页。当我固定导航标题并打开/关闭侧边栏时，导航标题不是自动宽度，它会被推到右边。
如何使用 css 设置它的自动宽度？
最佳答案
我已经使用您最新的 jsfiddle 进行实验，您非常非常接近解决方案!
工作解决方案:
.fixed .mt-tab-header{
position: absolute;
display:inline-block;
}
为什么它对 fixed 不起作用？
position: fixed 不尊重父元素，因此会否决它的位置，有效地占用 body 外部的空间。 position: absolute 相对于它的父级，因此会尊重它的边界。
这是我的猜测，如果我不完全正确，请随时纠正我:)!
关于html - 当父 div 更改宽度时，如何为固定子 div 设置自动宽度？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39011072/