css页脚的问题答案

【问题标题】：Problem with css footercss页脚的问题
【发布时间】：2023-03-27 08:16:01
【问题描述】：

我的网页有问题。

我正在使用 min-height 属性将页脚放置在页面底部（如果内容不够长）和内容之后（如果内容比窗口长）。有很多教程描述了这种方法，我也是这样做的。

html, body { height: 100%; }
.container { 
    min-height: 100%; 
    position: relative;
}
.footer {
    position: absolute;
    bottom: 0;
}

和其他一些代码。那么它工作正常。

当我创建两个额外的 div 以将阴影添加到容器 div 时，会出现问题。我有：

<div class="left-shadow">
    <div class="right-shadow">
        <div class="container">
        ...
        </div>
    </div>
<div>

我认为 html 和 body 高度保持 100%，left-shadow div 的 min-height 为 100%，right-shadow 和 container 的高度为 100%（我假设 100% 意味着 100%父元素的高度）。

但是，它不起作用（在 Firefox 中，它在 Chrome 中起作用，我并不真正关心 IE），并且我尝试了各种组合以使其正确，但无济于事。任何帮助将不胜感激。

编辑：（部分代码）

<html>
    <head>
    ...
    </head>
    <body>
        <div class="left-shadow">
            <div class="right-shadow">
                <div class="container">

                    <div class="header">
                        header content
                    </div>

                    <div class="content" >
                       content goes here
                    </div>


                    <div class="footer">
                        footer content here
                    </div>


                </div> <!-- end container div -->
            </div>
        </div>
    </body>
</html>

以及相关的css：

html {
    overflow-y: scroll;
    height: 100%;
}

body {
    margin: 0 0 0 0;
    height:100%;
}

.left-shadow
{
    width: 1084px;
    background: url("images/left-shadow.png") repeat-y left; 
    /* both bg images are 30px wide.  1024 + 30 + 30 = 1084px */
    margin: auto;
    min-height: 100%;
}

.right-shadow
{
    width: inherit;
    background: url("images/right-shadow.png") repeat-y right;
    margin: auto;
    height: 100%;
}


.container {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0;
    width: 1024px;
    height: 100%;
}

编辑 2：所以我才发现这个问题属于doctype。所以从现在开始，我会在正确的地方提问。但既然这已经结束了，我会要求人们无论如何都要做出回应，而不要进入应该在哪里发布问题。谢谢。

【问题讨论】：

有机会看到你的影子代码吗？我的猜测是它们是绝对放置的，因此容器是根据这些元素放置的。此外，您可能需要为阴影定义最小高度/高度，因为它不会被继承。

标签： html footer dropshadow css

【解决方案1】：

首先，使用 CSS 创建阴影效果。如果 CSS 解决方案不是您想要的，那么可以尝试将阴影设置为 .container 的背景图像。现在你的标记被不必要的元素超载了。

但是如果额外的标记是做你想做的事情的唯一方法，那么试试这样的事情：

* {
    margin: 0;
    padding: 0;
}

html, body, .shadow, #container {
    min-height: 100%;
}

#container {
    position: relative;
}

#content {
    padding-bottom: 55px;
}

#footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 50px;

    background: #0a0;
}

还有 HTML 标记（这些 shadow div 让它看起来很糟糕）：

<body>
    <div id="shadow-left" class="shadow">
        <div id="shadow-right" class="shadow">
            <div id="container">
                <div id="content">
                    Page contents
                </div>
                <div id="footer">
                    Footer
                </div>
            </div>
        </div>
    </div>
</body>

【讨论】：

【解决方案2】：

我真的建议使用这个简单的解决方案来代替“粘性页脚”。解决问题：http://ryanfait.com/sticky-footer/

它所需要的只是让您能够为您的页脚定义一个固定的高度，这在几乎所有情况下都应该没有问题。

适用于所有常见的浏览器！

【讨论】：