主要内容如下到来侧边栏。浮动不工作？

Question

我有一个布局像下面 -

.page-wrapper { 
 
    height: 100%; 
 
    min-height: 970px; 
 
    position: relative; 
 
} 
 

 
.pageheader { 
 
    min-height: 50px; 
 
    position: fixed; 
 
    min-width: 100%; 
 
} 
 

 
.navbar-fixed-top { 
 
    top: 0; 
 
} 
 

 
.page-sidebar { 
 
    float: left; 
 
    width: 180px; 
 
    top: 0; 
 
    overflow: auto; 
 
} 
 

 
.page-content { 
 
    min-height: 970px; 
 
    float: left; 
 
} 
 

 
footer { 
 
    width: 100%; 
 
    text-align: center; 
 
    position: relative; 
 
}

<div class="page-wrapper"> 
 
    <div> 
 
    <div id="header" class="pageheader navbar navbar-fixed-top"> 
 
     Navbar Top 
 
    </div> 
 
    <div class="clearfix"></div> 
 
    </div> 
 
    <div class="content-wrapper"> 
 
    <div> 
 
     <div class="clearfix"></div> 
 
     <div id=".navbar-collapse" class="page-sidebar"> 
 
     Navbar Side 
 
     </div> 
 
     <div class="clearfix"></div> 
 
    </div> 
 
    <div> 
 
     <div id="content" class="page-content"> 
 
     Content 
 
     </div> 
 
    </div> 
 
    <div> 
 
     <footer id="footer"> 
 
     Foter 
 
     </footer> 
 
    </div> 
 
    </div>

我的主要内容包装来了侧边栏的下方，在中间的某个地方页脚。我已经在内容包装哪些地方页面内容旁边侧边栏但页脚仍停留在页面的中间使用

display:inline-flex 

尝试。请帮我解决一下这个。

Answer 1

可以使用calc设置page-content宽度。检查以下

body { 
 
    margin: 0px; 
 
} 
 
.page-wrapper { 
 
    height: 100%; 
 
    min-height: 970px; 
 
    position: relative; 
 
    width: 100%; 
 
    padding-top: 50px; 
 
    display: block; 
 
}  
 
.pageheader { 
 
    min-height: 50px; 
 
    position: fixed; 
 
    min-width: 100%; 
 
    background: red; 
 
} 
 
.navbar-fixed-top { 
 
    top: 0; 
 
} 
 
.content-wrapper { 
 
    background: grey; 
 
    float: left; 
 
    width: 100%; 
 
} 
 
.page-sidebar { 
 
    float: left; 
 
    width: 180px; 
 
    overflow: auto; 
 
} 
 
.page-content { 
 
    min-height: 970px; 
 
    float:left; 
 
    background: green; 
 
    width: calc(100% - 180px); 
 
} 
 
footer { 
 
    width: 100%; 
 
    text-align: center; 
 
    position:relative; 
 
    background: black; 
 
    clear: both; 
 
}

<div class="page-wrapper"> 
 
    <div> 
 
     <div id="header" class="pageheader navbar navbar-fixed-top"> header<br/> 
 
     </div> 
 
     <div class="clearfix"></div> 
 
    </div> 
 
    <div class="content-wrapper"> 
 
     <div> 
 
      <div class="clearfix"></div> 
 
      <div id=".navbar-collapse" class="page-sidebar">sidebar</div> 
 
      <div class="clearfix"></div> 
 
     </div> 
 
     <div> 
 
      <div id="content" class="page-content"> content 
 
     </div> 
 
    </div> 
 
      <div class="clearfix"></div> 
 
    <div> 
 
     <footer id="footer">footer 
 
     </footer> 
 
    </div> 
 
</div>