Question

首先看图片：

就像你看到我的页面中心我的意思是这个内容与小分辨率的形式越过导航栏。此内容通过flex以verticaly和horizontal为中心。

这是代码和我尝试的内容： 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代码。在没有看到所有内容的情况下，我建议您尝试在较小的断点中删除flexbox并使用display: block;并确保<div class='row content-inner'>元素静态定位（position: static;）。

Css固定高度内容beetwen footer和header

1 个答案: