Question

我正在尝试使用％而不是px，它表现得有些奇怪。为什么我的页脚继续向右（元素“pagePlaceHolderInner”之外）如果我将两个元素（“pagePlaceHolderInner”和“footer”）设置为某个px-number，但我想在这里使用％。

代码：

        <html>
        <head>
        <style type="text/css">
        body #pagePlaceHolderOuter {
            background: #FFFFFF;
            height: 100%;
            left: 0;
            position: absolute;
            top: 0;
            width: 100%;
        }
        body #pagePlaceHolderOuter #pagePlaceHolderInner {
            background: none repeat scroll 0 0 yellow;
            height: 100%;
            margin: 0 auto;
            max-width: 1000px;
            min-width: 700px;
            width: 70%;
        }
        body #pagePlaceHolderOuter #pagePlaceHolderInner .footer {
            background: gray;
            bottom: 0;
            height: 20%;
            position: fixed;
            width: 100%;
        }
        </style>
        </head>
        <body>

        <div id="pagePlaceHolderOuter">
            <div id="pagePlaceHolderInner">
                <h1>Hi guys!</h1>
                <div class="footer"></div>
            </div>
        </div>

        </body>
        </html>

或检查jsfiddle

Answer 1

您无法按照传统方式修改元素以引用整个页面的方式将元素修复到容器中。相反，您可以手动为其提供相同的父级维度，因为它不像通常的子级，而是像直接位于文档下方的元素一样

body #pagePlaceHolderOuter #pagePlaceHolderInner .footer {
    position: fixed;
    height: 100%;
    margin: 0 auto;
    max-width: 1000px;
    min-width: 700px;
    width: 70%;
    /* The rest of your code for this element */
}

Demo here

另一种方法是继承父级的值是改为使其位置absolute，尽管这不是你想要的。为此，您还需要将position:relative;添加到其容器中

body #pagePlaceHolderOuter #pagePlaceHolderInner {
    position:relative;
    /* The rest of your code for this element */
}
body #pagePlaceHolderOuter #pagePlaceHolderInner .footer {
    position:absolute;
    /* The rest of your code for this element */
}

Updated jsFiddle

Answer 2

页脚固定到页面底部

我想你可能会尝试这样做：

body #pagePlaceHolderOuter #pagePlaceHolderInner .footer {
    background: gray;
    position: fixed;
    height: 20%;
    bottom: 0;
    margin: 0 auto;
    width: 70%;
    min-width: 700px
}

请参阅演示小提琴：http://jsfiddle.net/audetwebdesign/ktM6n/

您需要调整页脚宽度和页边距，与pagePlaceHolderInner块级容器类似。

如果您希望将页脚固定到视口的底部，则可以将宽度与布局的其余部分进行匹配。

问题的根源是具有position: fixed的元素被从流中取出，并且相对于根级元素（视图端口）的大小和位置。一旦你意识到这一点，解决方案很简单。

Answer 3

试试这段代码，我希望它能帮到你

body #pagePlaceHolderOuter {
    background: #FFFFFF;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}
body #pagePlaceHolderOuter #pagePlaceHolderInner {
    background: none repeat scroll 0 0 yellow;
    height: 100%;
    margin: 0 auto;
    max-width: 1000px;
    min-width: 700px;
    width: 70%;
    position:relative;
}
body #pagePlaceHolderOuter #pagePlaceHolderInner .footer {
    background: gray;
    bottom: 0;
    height: 20%;
    position: absolute;
    width: 100%;
}

Answer 4

由于页面上其他元素的宽度，您的固定元素宽度正在扩展。

页面上的元素可能比屏幕宽度宽。固定元素有效地放在DOM的顶部，不受其父母的约束。

限制固定元素宽度的一种方法是使用CSS3 vw单位（相对于视口的大小。例如width: 100vw。现在它在大多数主流浏览器中都是可接受的单位。

https://www.w3schools.com/cssref/css_units.asp

CSS问题：宽度为100％的固定页脚太宽

4 个答案:

页脚固定到页面底部