html - 侧边栏下方的主要内容。 float 不起作用？

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

在 content-wrapper 上，它将 page-content 放在 sidebar 旁边，但页脚仍保留在页面中间。请帮我解决这个问题。

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>