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

我有一个页脚这样，代码如下：响应页脚设置为笔记本电脑和移动设备

<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：当视域小于1000像素时，应用设定A

2：当视口大于1000像素&移动人像模式，应用设置乙

我的问题：

1：当视口大于1000像素更大页脚不居中

2：页脚不固定于移动人像模式底部。

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

来源

2017-04-18 Frostless

你应该把你的问题简单明了。 1.什么是你的问题，2.显示你的整个代码（在JSFiddle或代码片段），3.你想要什么 –

无法在jsfiddle中找到整个代码。请更新它。 – athi

请更新jsfiddle中的正确部分，以便我们检查并帮助您。 –

抱歉耽搁，我的困惑的问题。我无法让自己的头脑正直。我最终需要的是让页脚变得粘稠。我发现这个链接，它解决了我的问题。

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; 
}

来源

2017-04-19 07:09:04 Frostless

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

回答

相关问题