3

我正在尝试使用 % 而不是 px ，它的行为有点奇怪。为什么我的页脚继续向右（在元素“pagePlaceHolderInner”之外）如果我将两个元素（“pagePlaceHolderInner”和“footer”）都设置为某个像素数但我想在这里使用 % ，它会起作用。

编码：

        <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

4

4 回答 4

3

您不能按照通常希望参考整个页面来修复元素的方式将元素修复到容器中。相反，您必须手动为其赋予与父级相同的尺寸，因为它不像通常的子级，而是像位于文档正下方的元素一样

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 */
}

演示在这里

一个替代方法是让它继承父级的值，而不是让它的位置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 */
}

更新了 jsFiddle

于 2013-08-25T18:15:51.007 回答
1

对于固定到页面底部的页脚

我认为您可能正在尝试这样做：

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从流中取出，并相对于根级元素（视口）调整大小和定位。一旦意识到这一点，解决方案就很简单了。

于 2013-08-25T18:22:26.443 回答
0

试试这段代码，希望对你有帮助 

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%;
}
于 2013-08-25T18:22:50.953 回答
0

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

您可能在页面上有一个比屏幕宽度更宽的元素。固定元素被有效地放置在 DOM 的顶部，并且不受其父元素的约束。

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

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

于 2017-03-08T12:21:11.300 回答