CSSは高コンテンツインナーbeetwenフッターとヘッダー画像の

Question

まず外観を修正しました。このコンテンツは、フレックスによって垂直方向および水平方向にセンタリングされます。ここ

は、コードと私は何をしようとしている。高さは、ページのスクロール開始小さいとき 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; 
} 
} 

あなたは私のこのような何かを助けることができますか？

Answer 1

フレックスボックスコードが不足しているようです。すべてを見ることなく、小さなブレークポイントでflexboxを削除し、display: block;を使用して、<div class='row content-inner'>要素が静的に配置されていることを確認することをお勧めします（position: static;）。