底部的页脚，仅当向下滚动超过正文元素/超过窗口高度的100%时才可见？
底部的页脚，仅当向下滚动超过正文元素/超过窗口高度的100%时才可见？
提问于 2019-05-21 04:05:05
我希望body element在打开网站时处于焦点位置，footer element位于正文的底部。所以footer element的目标一定是body element。我不希望它们重叠。我想要向下滚动才能到达footer element。
<html>
<head>
<meta charset = "utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel = "stylesheet" type = "text/css" href = "master.css">
<title>Home Page</title>
</head>
<body>
<div id = "container">
<div class = "top-container">
<div id = "logo"><img url="logo.png" /></div>
</div>
<div class = "center-container">
<div class = "title"><h1>Current Settings</h1></div>
<div id = "center_text_box">
<p>URL:</p> <p><span>%PLACEHOLDER_URL%</span></p>
<p>URL Refresh Rate:</p><p><span>%PLACEHOLDER_URR%</span>(s)</p>
<p>Brightness:</p> <p><span>%PLACEHOLDER_Brightness%</span>(%)</p>
</div>
</div>
<div class = "bottom-container">
<div class = "title"><h1>Logs</h1></div>
<div class = "text-box">%PLACEHOLDER_1%</div>
</div>
</div>
<footer>
<div class = "footer">
<ul>
<li><a href= "http://metrici.ro/"><img src="logo_icon.jpg" /></a></li>
<li><a href= "https://www.facebook.com/metricirecognition/"><img src = "Facebook_icon.png" /></a></li>
<li><a href= "https://www.linkedin.com/company/metrici/"><img src = "LinkedIn_icon.png" /></a></li>
<li><a href= "https://www.youtube.com/user/MetriciLPR"><img src = "YouTube_icon.png" /></a></li>
</ul>
<div id = "trademark">
<span>2019 TradeMark</span>
</div>
</div>
</footer>
</body>
</html>html {
min-height: 100%;
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
font-family: sans-serif;
height: 100%;
/* overflow: hidden; */
background-color: rgba(20,20,20,0.3);
}
#container {
position: absolute;
width: 100%;
height: 100%;
margin: 0 auto;
padding: 0;
}
.top-container, .bottom-container, .center-container, .dropwdown-container {
position: absolute;
}
.top-container {
left: 30%;
top: 0;
height: 100px;
width: 40%;
}
.center-container {
left: 20%;
top: 10%;
width: 60%;
height: 250px;
background: rgba(0,0,0,0.2);
}
.bottom-container {
left: 10%;
bottom: 0;
height: 350px;
width: 80%;
background: rgba(0,0,0,0.2);
}
footer {
position: absolute;
left:0;
right:0;
bottom:0;
}
.footer ul {
flex: left;
margin: 0;
padding: 0;
}
.footer li {
display: inline;
}
.footer img {
width:5%;
}position:absolute不是解决问题的方法。或者至少我不能用它做我想要的。现在，footer正在与body和.bottom-container重叠。
将#container从position: absolute;更改为position: relative;会使子div：top-container、center-container、bottom-container移动到窗口顶部，并在彼此的顶部。
这可以在没有JavaScript或jQuery的情况下实现吗？
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-05-21 05:13:05
从评论更新-
将页脚设置为相对位置将允许将其放置在容器元素之后。将容器的最小高度设置为100vh会使该容器至少具有窗口渲染屏幕值的100%，而如果将其定义为100%则不会，因为它不知道父高度。我知道CSS中有个很奇怪的东西。
#container{
position:relative;
min-height:100vh;
width: 100%;
margin:0;
padding:0;
}
.footer{
position:relative;
}这些css更改将更正容器和页脚的显示。
至于你遇到的其他立场问题--我会考虑不要在所有事情上都使用绝对立场。根据内容和css的外观，您可以基本使用浮动或网格来实现该布局。当你缩放浏览器时，使用百分比作为偏移量总是使冲突处于打开状态。我建议设置那些实际的值，比如4em等等。如果不知道更多关于显示器的期望，我就不能给出更多的建议。只有这一点:对于所有的设备来说，绝对疯狂是很难平衡的。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56227478
复制相关文章
相似问题