页脚位于窗口底部,而不是页面底部。我究竟做错了什么?

时间:2019-01-09 18:45:39

标签: html css

我查找了类似的问题,但这些决议似乎都不适合我的问题。 我有漂浮在页面上方的浮动控件,当我加载页脚时,它将位于网页最初结束的底部,然后向下滚动。 救命!

更新: 我已经删除了

  

位置:固定

,并尝试了其他一些方法。 我尝试做的其他任何事情最终都仍然位于窗口底部的页脚中,并且可以简单地滚动过去。 还有其他建议或代码可以尝试吗?

此外,对“不使用负边距”感到好奇,因为这就是我用来构造大部分内容的原因。我如何在不完全摆脱我所拥有的东西的情况下使用其他东西来对其进行重组?谢谢

html:

<!DOCTYPE html>

<head>
<meta charset="utf-8" />
<link href = "../Design/Designwork.css" type="text/css" rel="Stylesheet">
<title>Interactive Site</title>

</head>
    <body>

        <header>
            <div id="navbar">
                    <ul>
                        <li><a href="#">Forum</a></li>
                        <li><a href="#">Videos</a></li>
                        <li><a href="#">Products</a></li>
                        <li><a href="#">More</a></li>
                    </ul>
            </div>
            <div id="textlogo">
                <h2><a type="logo" href="#">Gamers Forum</a></h2>
            </div>
        </header>
        <div class="square">Hi, I'm your console</div>
        <div class="square2"></div>

        <div class="view1"></div>
    </div>
        <footer>
        <div id="footer">

        </footer>
        </div>
    </body>
</html>

css:

        header {
background-color: hsl(0, 67%, 37%);
padding: 10px 40px;
width: 90%;
margin: auto;
background-position: fixed;

    }

    #navbar {
display: inline;
        font-family: webfont, sans-serif;
word-spacing: 45px;
    }

    li {
    display: inline-block;}

    a {
        color: white;
        text-decoration: none;
        font-size: 40px;
        letter-spacing: 2px;
        color: white; 
        font-weight: 200px;
    }
        #navbar, li, a {
            text-indent: 60px;
        text-align: right;}


        h2 {
        font-family: futurblock, sans-serif !important;
        font-size: 30px !important;
        letter-spacing: 0em !important;
        margin-top: -65px;
        color: white;
        font-weight: 250px;
        }

        body {
        background-color: #336666;
        margin: 0 auto;}

    a #logo {
    color: black !important;}

    a:hover {
        color: black;
    font-style: italic;}

    a:active {
        color: yellow;
    font-style: none;}

    .center {
    margin: 0 auto;}

    .square {
        width: 65%;
    background-color: #993333;
    margin: 0 auto;
    position: center;
    margin-top: 75px;
    margin-right: 250px;
    padding-bottom: 45%;
    box-shadow: 0 0 15px #000;}



        .square2 {
            width: 40%;
            padding-bottom: 40%;
            background-color: #333;
            position: center;
            margin-top: -820px;
            margin-left: 650px;
            box-shadow: 0 0 10px #000;
        }



        .square {
            font-family: ivyjournal, sans-serif;
            font-size: 50px;
            font-weight: 5em;
            text-indent: 350px;
            vertical-align: text-bottom;
            color: #333;
            text-shadow: 1px 1px #000;

        }

        .view1 {
            width: 450px;
            padding-bottom: 10%;
            background-color: #fff;
            position: center;
            margin: 0 auto;
            margin-top: -600px;
            margin-right: 650px;
            height: 200px;
            box-shadow: 0 0 5px #000;


        }

            #footer {
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                height: 30px;
                background-color: #333;
            clear: both;

            }

对不起,代码肯定可以组织得更好。我还在学习!

5 个答案:

答案 0 :(得分:2)

只需从页脚的CSS规则中删除position: absolute;,这就会将其放入常规文档流中。

您还可以然后删除位置设置bottomleft-如果没有相对位置,绝对位置或固定位置,它们将毫无意义。

最后,如果您不完全了解它们会产生什么影响,请不要使用负margin设置。 (即,移动其元素,可能与其他元素重叠。

答案 1 :(得分:2)

因此,正如约翰内斯指出的那样,这是您的position:absolute,有两种解决方法可以完全删除(由约翰内斯指出)或添加position :relative 到父级,footer也没有正确关闭。

还有一些技巧,请始终尝试确保父级包含孩子,并且可以使用positionsfloats代替边距(如果使用浮点数,请添加overflow:hidden或{{1} }以及父元素)

这是帮助您的链接

https://developer.mozilla.org/kab/docs/Web/HTML

答案 2 :(得分:0)

在选择器#footer中,只需将位置从绝对更改为相对。像这样:

#footer {
            position: relative;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 30px;
            background-color: #333;
        clear: both;
        }

答案 3 :(得分:-1)

我很害怕,您的问题是在类view1上,在CSS上,您有

.view1 { margin-top:-600px }

答案 4 :(得分:-1)

具有绝对位置的元素相对于具有相对位置的第一个父元素放置。因此,如果孩子的位置是绝对的,父母的位置是静态的,而祖父母的位置是相对的,则孩子将相对于祖父母。在您的情况下,如果body元素具有相对位置,则页脚(位置绝对)将自身定位在body元素的底部。