页脚与主要内容重叠

Question

我一遍又一遍地尝试修复页脚，在网上搜索解决方案，但没有任何效果。我想让它清除页面上的内容并位于底部，这是行不通的。我真的需要一些帮助。顺便批评一下，我刚刚开始，我可以使用它。谢谢:)

这是代码笔：https://codepen.io/FearShady/pen/YrMvMz

<html>
<head>
    <title>Lorem ipsum</title>
    <link rel="stylesheet" type="text/css" href="Lorem ipsum.css" />
</head>
<body>
<div id="container">
    <div id="title">
    <h1>Lorem ipsum</h1>
    </div>
    <div id="main">

        <div id="text">
        <h2>Lorem ipsum</h2>
        <p><mark><em>Lorem ipsum</em></mark> dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

        <h2>Lorem ipsum</h2>
        <p>"But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is </p>
        <iframe width="560" height="315" src="https://www.youtube.com/embed/CBjij5QgzeE" frameborder="0" allowfullscreen></iframe>
        <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias "</p>
        <p>On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so </p>

        <h2>Lorem ipsum</h2>

        <p>"But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, </p>

        <p>"But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, no resultant pleasure?"</p>

        <p>"At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias </p>
        <h2>Lorem ipsum</h2>
        <p>"But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system"</p>


        <p>"At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias "</p>


        <p>"But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, no resultant pleasure?"</p>
        <h2>Lorem ipsum</h2>

        <p>"At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias."</p>
        </div>
        <div id="image">
        <img src="Lorem ipsum.png" alt="Lorem ipsum" width="330" />
        </div>

    </div>
    <div id="cuprins">
    <table border="solid" >
        <th>Lorem ipsum</th>
        <th>Lorem ipsum</th>
        <th>Lorem ipsum</th>
        <th>Lorem ipsum</th>
        <th>Lorem ipsum</th>
        <th>Lorem ipsum</th>
    </table>
    </div>

    <div id="footer">
    <q>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </q>
    </div>
</div>
</body>
</html>

Answer 1

body是footer的相对位置（绝对值），如果我明白你想要什么，你应该这样改：

html, body{
    margin: 0;
    padding:0;
    padding-bottom:50px;
    background-image: url("background.png");
    background-attachment: fixed;
}
#footer {
    position: fixed;
    bottom: 0;
    right:0;
    left:0;
    height: 50px;
    background-color: rgba(0, 0, 0, 0.6);   
}

页脚与主要内容重叠

Footer overlaps the main content

html

css

footer