Question

我希望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>(&#37;)</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;将使以下细分：top-container，center-container，bottom-container移至顶部窗口，并且彼此重叠。

在没有JavaScript或jQuery的情况下可以实现吗？

Answer 1

更新评论-

使页脚位置相对将允许将其放置在容器元素之后。将容器的最小高度设置为100vh，使该容器的最小值为窗口的渲染屏幕值的100％，而将其定义为100％则不会，因为它不知道父级的高度。我知道CSS很奇怪。

#container{
    position:relative;
    min-height:100vh;
    width: 100%;
    margin:0;
    padding:0;
}

.footer{
    position:relative;
}

这些css更改将更正容器和页脚的显示。

关于您遇到的其他职位问题-我会考虑不在所有内容上使用绝对职位。通过内容和CSS的外观，您可以基本使用float或grid来实现该布局。并且使用百分比作为偏移量在缩放浏览器时总是使冲突保持打开状态。我建议设定这些实际值，例如4em等。在不了解显示器期望值的情况下，我真的不能提供更多建议。只有那个前进的位置：绝对疯狂对于所有设备来说都是很难平衡的。

底部的页脚，仅当向下滚动超过主体元素/超过窗口高度的100％时可见？

1 个答案: