Question

我有一个这样的页脚，代码如下：

 <div class = "footer">
    <hr>
    <div class="beian">company <a target="_blank" 
     href="URL">company number</a>
    </div>
 </div>

CSS

 hr {
   display: block;
   position: relative;
   padding: 0;
   margin: 8px auto;
   height: 0;
   width: 50%;
   max-height: 0;
   font-size: 1px;
   line-height: 0;
   clear: both;
   border: none;
   border-top: 1px solid #808080;
   border-bottom: 1px solid #aaaaaa;
   }

.beian {
   font-size:11px;
   text-align: center;
   }

我想在底部垂直固定页脚，同时不影响页面内容

the initial code is 

.footer {
   bottom : 2px;  
   height : 40px;  
   margin-top : 40px;  
   text-align: center;  
   vertical-align: middle; 
   position:fixed;
   width:100%;
  left:10%
 }

但是此设置在

中效果不佳

1：当视口很小时（会弄乱页面内容）

2：在iphone的横向模式中（它将再次与内容重叠）

所以我的解决方案是：

1：当视口小于1000px时，应用设置A

2：当视口大于1000px＆amp;移动人像模式，应用设置B

我的问题：

1：当视口大于1000px时，页脚不居中

2：在移动纵向模式下，页脚未固定到底部。

小提琴：https://jsfiddle.net/h6tkgbb8/

Answer 1

对不起延误和我困惑的问题。我无法直截了当。我最终需要的是让页脚变得粘稠。我找到了这个链接，它解决了我的问题。

https://css-tricks.com/couple-takes-sticky-footer/

HTML：

<body>
    <div class="wrapper">

          content

    <div class="push"></div>
    </div>
    <footer class="footer"></footer>

CSS：

html, body {
    height: 100%;
    margin: 0;
}
.wrapper {
    min-height: 100%;

   /* Equal to height of footer */
   /* But also accounting for potential margin-bottom of last child */
   margin-bottom: -50px;
}
.footer,
.push {
    height: 50px;
 }

笔记本电脑和移动设备的响应式页脚设置

1 个答案: