主なコンテンツはサイドバーの下に表示されます。フロートは機能していない？

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

page-contentの幅はcalcと設定できます。実際

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>