Question

我正在尝试将垂直侧边框垂直拉伸到页面底部，并使左下角的页脚位于底部中心。我一直在寻找这个问题的解决方案，但我还是找不到它。我这样做是为了完成学校作业，因此，我仍在学习过程中。如果可以，请解释为解决这个问题需要做些什么。谢谢！

HTML：

<!doctype html>
<html lang="en">

    <head>
        <meta charset="utf-8" />
        <title>Play - Learn - Grow</title>
        <link rel="stylesheet" href="main.css">
    </head>

    <body class="body">

        <span class="headers_t">

            <span class="banner_h">
                <img src="Images\Top_Banner_4.png" alt="Banner" height="150" width ="1240" />
            </span>

            <nav>
                <ul class="nav">
                    <li><a href="index.html">Home</a></li>
                    <li><a href="about.html">About Us</a></li>
                    <li><a href="contact.html">Contact Us</a></li>
                    <li><a href="membership.html">Become a Member</a></li>
                    <li><a href="borrow.html">Borrow Toys</a></li>
                    <li><a href="policies.html">Our Policies</a></li>
                    <li><a href="sitemap.html">Site Map</a></li>
                </ul>
            </nav>

        </span>

        <span class="banner_l">
            <img src="Images\Side_Banner.jpg" alt="Banner" />
        </span>

        <span class="banner_r">
            <img src="Images\Side_Banner.jpg" alt="Banner" />
        </span>

        <h2 class="headers">Welcome to the Home Page!</h2>

        <div class="container">

            Our aim is to provide the children of the community with an ever-changing variety of educational and fun toys to enhance
            their cognitive, social, emotional and physical development in the important first six years of their lives.

            <br><br><span class="Links">Be sure to check out our Wikispace site with more information <a href="http://mysocialmediatools-pn.wikispaces.com/">here</a>!</span>

        </div>

        <div id="content"></div>

        <div id="footer">
            Copyright &copy 2013
        </div>


      </body>

</html>

CSS：

/* Entire Document CSS */
html{
    height: 100%;
}
/* Header CSS */
.headers_t{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}
.headers{
    color: #FFD89A;
    text-align: center;
    padding: 10px;
}
/* Body CSS */
.body{
    background-color: #61B329;
    height: 50%;
    color: #FFFFFF;
    margin: 0px;
    padding-top: 191px;
}
.container{
    margin: 0 auto 0 auto;
    width: 50em;
    text-align: center;
    padding-bottom: 500px;
    height: 50%;
}
/* Navigation CSS */
.nav {
    display: inline-block;
    background-color: #00B2EE;
    border: 1px solid #000000;
    border-width: 1px 0px;
    margin: 0;
    padding: 0;
    width: 100%;
}
.nav li {
    list-style-type: none;
    width: 14.28%;
    float: left;
}
.nav a {
    display: inline-block;
    padding: 10px 0;
    width: 100%;
    text-align: center;
}
/* Banner / Picture CSS */
.banner_l{
    float: left;
}
.banner_r{
    float: right;
}
.banner_h, img{
    display: block;
    width: 100%;
}
/* Footer CSS */
#footer {
 clear: both;
 position: relative;
 z-index: 10;
 height: 3em;
 margin-top: -3em;
}
#content {
    padding-bottom: 3em;
}
/* Link CSS */
a:link{
    color: #FFFFFF;
    text-decoration: none;
}
a:visited{
    color: #FFFFFF;
    text-decoration: none;
}
a:hover{
    background-color: #028482;
    color: #FFFFFF;
    text-decoration: underline;
}
a:active{
    background-color: #FCDC3B;
    color: #AA00FF;
    text-decoration: overline;
}
.Links A:hover{
    color: #028482;
    background-color: transparent;
    text-decoration: underline overline;
}

这就是网站中的问题：

Image of Problem http://i.tinyuploads.com/cwPP9R.jpg

Answer 1

欢迎Jokan！像jsfiddle.com这样的网站模拟了这类前端问题的典型问题，这样其他用户就可以轻松看到你所说的内容，并帮助你找到解决方案。

如果我理解正确的话，请用fiddle表示你的解决方案。你只想让横幅成为浏览器窗口的高度吗？

我只是将.banner_h的高度设置为100％，如下所示：

.banner_h {height:100%;}
#footer {width:100%; text-align: center;}

Answer 2

这可能会对您有所帮助，请将以下css样式修改为 -

.banner_l{
    float: left;
    border:thin solid #000; 
    width:200px;  
    position:fixed; 
    height:auto; 
    min-height:380px; 
    margin-top:-20px;
}
.banner_r{
    float: right;
    border:thin solid #000;
    margin-top:-20px; 
    width:200px; 
    min-height:380px; 
    height:auto; 
}

#footer {
width:100%;
height:30px; 
background:#090; 
float:left; 
position:fixed;
padding:5px; 
bottom:0px; 
text-align:center; 
}

根据需要将职位风格改为相对或绝对。

拉伸横幅，并使页脚居中

2 个答案: