gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 03:55:50 24 4
gpt4 key购买 nike

我有这样一个页脚,代码如下:

 <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: viewport 小的时候(会打乱页面内容)

2:在iphone的横向模式下(它会再次与内容重叠)

所以我的解决方案是:

1:当视口(viewport)小于1000px时,应用设置A

2:当viewport大于1000px & mobile portrait mode, apply setting B

我的问题:

1:视口(viewport)大于1000px时页脚不居中

2:手机竖屏模式下页脚未固定在底部。

fiddle :https://jsfiddle.net/h6tkgbb8/

最佳答案

对于延迟和我令人困惑的问题,我们深表歉意。我无法理清头绪。我最终需要的是让页脚变粘。我找到了这个链接,它解决了我的问题。

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

关于html - 笔记本电脑和移动设备的响应式页脚设置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43462491/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com