Question

我编写了类似于以下结构的网页，所有内容都在<div id="wrapper">内。

问题：如果网页只有几行（短于垂直分辨率）。如何确保左/右阴影可以扩展，以便它可以从上到下显示？

如果只改变CSS，我们将不胜感激。 THX〜

从此 enter image description here 更改为此

<html>
<head>
<style>
body {
    margin:0px;
    padding:0px;
}
#mainWrapper {
    width:980px;
    margin:0 auto;
    box-shadow:0 0 10px #999;
}
#wrapper {
    width:960px;
    margin:0px auto 0px auto;
    padding:0px 0px 10px 0px;
    background:#fff;
}
#pageFooter {
    position:fixed;
    left:0px;
    bottom:0px;
    height:30px;
    width:100%;
    background:#999;
}
</style>
</head>    
<body>
<div id="mainWrapper">
    <div id="wrapper">
        ContentContentContent
        <div id="pageFooter">
            FooterFooterFooter
        </div>
    </div>
</div>
</body>
</html>

Answer 1

使用min-height属性。

html, body {
    height: 100%;
}

/* your wrapper */ {
    min-height: 100%;
}

Demo JSFiddle

Answer 2

以下是更好的方法：http://codepen.io/pageaffairs/pen/IKDBG/

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style type="text/css">
html, body {
    height:100%;
    margin:0;
    padding:0
}
#outer {
    width:80%;
    margin:auto;
    height:100%;
    display:table;
    table-layout:fixed;
    vertical-align:top;
}
.inner { display:table-row; }
#footer {
    background:#eee;
    vertical-align:bottom;
    height:1px;/* use a minimum height to keep footer wrapped to content */
}
#main {
    vertical-align:top;
    width:100%;
    box-shadow: 0 0 30px #000;
}
#main, #footer {
    display:table-cell;
    padding:5px;
}
</style>
</head>
<body>
<div id="outer" >
        <div class="inner">
                <div id="main">
                        <p>Content content content</p>
                </div>
        </div>
        <div class="inner">
                <div id="footer">
                        <p>Footer <br>footer <br>footer</p>
                </div>
        </div>
</div>
</body>
</html>

（感谢Paul O'Brien获取模板。）

Answer 3

我认为您需要为#wrapper添加100％的高度。请不要在此引用我

Answer 4

这是另一个粘性页脚选项，可以使页脚保持100％宽：http://codepen.io/pageaffairs/pen/aFrfs/

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<style media="all">
html, body {height: 100%; margin: 0; padding: 0;}

* html #outer {
    height:100%;
}

.wrapper {
    min-height: 100%;
    margin: -240px auto 0;
    box-shadow: 0 0 20px #000;
    width: 80%;
}

.content {padding-top: 240px; }

.footer {
    height: 240px; background: #999; color: #fff;
}

</style>

</head>
<body>

<div class="wrapper">
    <div class="content">Content content content</div>
</div>
<div class="footer">Footer footer footer</div>

</body>
</html>

此方法的局限性在于页脚具有固定的高度。

CSS：扩展等于垂直分辨率的页面高度

4 个答案: