•  21-09-2019
  •  | 
  •  

题

我在与网页中的问题。

我使用的最小高度属性放置在页面底部的尾（如果内容是不够长）和内容后（如果含量比上述窗口长）。有很多描述这种方法的教程，我也做到了这种方式。

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和车身高度保持100％，左阴影格具有100％最小高度，和右阴影和容器具有的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。所以从现在开始，我会问在正确的地方的问题。但由于这已经是了，我会问，人们没有进入其中的问题应张贴反正回应。感谢。

有帮助吗？

解决方案

首先，以创建阴影效果使用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标记（这些的 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>

其他提示

我真的建议使用“粘性页脚”，而不是这种简单的解决方案。刚刚摆脱的问题： http://ryanfait.com/sticky-footer/

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

工程在所有常见的浏览器！

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top