主要内容位于侧边栏下.浮动不起作用

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

on content-wrapper 在 sidebar > page-content 中，但页脚仍然留在页面中间。请帮助我。

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>