的CSS固定高度的內容內beetwen頁腳和頁眉

就像你看到我的網頁的中心，我的意思是內容與小分辨率的形式得到了導航欄。此內容由flex按垂直和水平居中。

這裏是代碼，以及我嘗試： html`

<nav> 
    <div class='row header-inner'> 
    <div class='col-md-10 col-lg-10 col-lg-offset-2 col-md-offset-2 col-sm-offset-1 col-sm-11 col-xs-12'> 

     <div class='row logo-inner'> 
     <img src="assets\static\Logo.png"> 
     </div> 
     <div class='row menu-inner'> 
     <a class='menu-item' routerLink="/aboutUs" routerLinkActive="active">about us</a> 
     <a class='menu-item' routerLink="/skiCams" routerLinkActive="active">skicams</a> 
     <a class='menu-item' routerLink="/contactUs" routerLinkActive="active">contact</a> 
     </div> 

    </div> 
    </div> 
</nav> 

<div class='row content-inner'> 
    <div class='col-md-8 col-lg-8 col-lg-offset-2 col-md-offset-2 col-sm-offset-1 col-sm-10 col-xs-12'> 
    <router-outlet></router-outlet> 
    </div> 
</div> 



<footer> 
    <div class='row center-block'> 
    <div class='col-md-offset-5 col-lg-offset-5 col-md-2 col-lg-2 col-sm-offset-5 col-sm-2 col-xs-offset-3 col-xs-6 footer-content'> 
     Powered by PGS 
    </div> 
    </div> 
</footer>`

和CSS

footer { 
    border-top: 1px solid #40637e; 
    background-color: #282828; 
    position: fixed; 
    left: 0; 
    bottom: 0; 
    height: 110px; 
    width: 100%; 
    overflow:hidden; 
} 

.footer-content{ 
    color :#959595; 
    border-top :1px solid #959595; 
    text-align: center; 
    margin-top:30px; 
    padding: 20px; 
    font-size: 10px; 
} 

.logo-inner{ 
    margin: 35px 0px 35px 0px; 
} 

.header-inner{ 
    border-bottom:1px solid #dbdbdb; 
    padding-bottom: 13px; 
    margin: 0; 
} 

.menu-inner{ 
    margin:0px; 
} 

.menu-item{ 
    margin-right: 40px; 
    padding-bottom: 15px; 
    font-size: 14px; 
    text-transform: uppercase; 
    font-weight: bold; 
    color:#545454; 

} 

.active{ 
    border-bottom:1px solid #ef6716; 
    color: #ef6716; 
} 

a:hover, a:focus { 
    color: #ef6716; 
    text-decoration: none; 
} 

.content-inner{ 
    background-color:#f8f8f8; 
    margin: 0; 
    /*margin-bottom:200px;*/ 
} 

@media(max-width : 768px){ 
    .menu-item{ 
    margin-right:30px; 
    padding-bottom: 14px; 
    font-size: 14px; 
    text-transform: uppercase; 
} 

.menu-inner{ 
    margin:0px; 
    text-align: center; 
} 
.logo-inner{ 
    margin: 35px 0px 35px 0px; 
    text-align: center; 
} 
}

能不能幫我做這樣的事情時，高度較小的頁面開始滾動？

來源

2017-05-30 Przemysław Zamorski

嘗試使用overflow：auto設置'min-height'爲'content-inner'; –

看起來你錯過了你的問題中的Flexbox代碼。沒有看到這一切，我會建議嘗試刪除較小斷點處的flexbox，並使用display: block;並確保您的<div class='row content-inner'>元素靜態定位（position: static;）。

來源

2017-05-30 19:21:08 chapeljuice

的CSS固定高度的內容內beetwen頁腳和頁眉

回答

相關問題