主要內容如下到來側邊欄。浮動不工作？

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>