Question

出于某些原因，我在我的网站上遇到了很大的问题我正在努力工作..页脚应该在页面的底部，我希望能够设置一个应该在多少％之间留出余量。

出于某种原因;这不起作用..

我不确定为什么要这样做..
这是页脚-CSS：

.footer {
    position: absolute;
    z-index: 99;
    bottom: 0;
    left: 0;
    right: 0;
    color: white;
}
.footerContent  {
    width: 95%;
    float: right;
}
.seperator {
    width: 95%;
    height: 5px;
    overflow: hidden;
    float: right;
    position: absolute;
    background: linear-gradient(to right, #9CD127,#006A91);
}
.footer p {
    font-family: DINOTMedium;
    position: relative;
    font-size: 26px;
}
.footer a, .footer a:visited {
    color: white;
    text-transform: uppercase;
    text-decoration: none;
    font-family: DINOTLight;
    font-size: 18px;
    transition: .1s;
    margin-right: 30px;
    position: relative;
}
.footer a:hover {
    color: #E88A4F;
}

.footer p.disclaimer {
    color: white;
    font-size: 16px;
    font-family: DINOTLight;
    position: relative;
}

这是content-css：

.container {
    position: absolute;
    top: 0;
    width: 90%;
    left: 10%;
    margin: auto;
    height: 100%;
}
.boxwrapper {
    width: 100%;
    position: absolute;
    top: 70%;
    margin-bottom: 15%;
}
.box-A {
    float: left;
    width: 46%;
    background: #0095D3;
    padding: 1% 2%;
}
.box-B {
    float: left;
    width: 46%;
    background: #63A33B;
    padding: 1% 2%;
}
.boxwrapper h1 {
    color: white;
    font-family: DINOT;
    font-size: 150%;
}
.boxwrapper p {
    color: white;
}
.boxwrapper a, .boxwrapper a:visited {
    color: white;
    text-decoration: none;
    font-size: 120%;
    transition: 0;
}
.boxwrapper a:hover {
    text-decoration: underline;
}
.boxwrapper a:hover  .box-A {
    background:black;
}

最后; HTML

<div class="container">

        <div class="panel">
            <div class="content">
                <h1>Att driva företag och samtidigt skapa en hemsida utan tillräcklig kunskap är inte lätt!</h1>
                <a href="">låt oss hjälpa!</a>
            </div>
        </div>

        <div class="boxwrapper">
            <div class="box-A">
                <h1>Rubrik 1</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi quis diam vitae ex laoreet congue eget imperdiet ante. Mauris mollis non mauris vel eleifend. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum tempus est non arcu molestie luctus. In sed dignissim est. Etiam a venenatis sem.</p>
                <p><a href="">Läs mer &raquo;</a></p>
            </div>
            <div class="box-B">
                <h1>Rubrik 2</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi quis diam vitae ex laoreet congue eget imperdiet ante. Mauris mollis non mauris vel eleifend. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum tempus est non arcu molestie luctus. In sed dignissim est. Etiam a venenatis sem.</p>
                <p><a href="">Läs mer &raquo;</a></p>
            </div>
        </div>

        <div class="footer">
            <div class="footerContent">
                <p>
                    <a href="https://facebook.com/ecoroundwebb">Facebook</a>
                    <a href="https://instagram.com/ecoroundwebb">instagram</a>
                    <a href="https://www.linkedin.com/company/ecoround-webbyr%C3%A5">linkedin</a>
                </p>

                <p class="disclaimer">
                    &copy; EcoRound Webbyrå
                </p>

                <br /><div class="seperator"></div><br />

                <p>&lt;/ECORND></p>

            </div>
        </div>

    </div>

有没有人知道它为什么会这样？我在蓝框上设置了margin-bottom＆＃39;封装到15％，实际页面变长，但页脚不会移动..

我基本上希望两个彩色框和页脚之间有15％的差距。

Answer 1

如果设置元素以定位绝对值。它将删除页面上占用的空间。因此，放在其后的元素将显示在屏幕的顶部。

将位置设置为相对将使其在屏幕上保持其比例宽度和高度，并正常推送其下方的内容。

您的绝对定位.panel会导致您的.boxwrapper显示在其下方。然后你的.footer

将.panel更改为相对位置，并删除.boxwrapper的“top”。这会将你的页面排序。

希望这有帮助。

Answer 2

position样式属性中的问题。

删除类position: absolute;的样式属性container, panel, boxwrapper, footer。

Answer 3

如前所述，我建议对std::any_of定位进行一些更改，包括：relative。但是，所以一切都到位，添加以下css：

container, panel, boxwrapper, footer

页脚位置不会改变

3 个答案: