页脚Html css的地方

Question

我有这个Tow列页面布局||但页脚是整个文件的问题 如果我希望页脚只在右侧列下作为此图像中的黑色页脚

，该怎么办？

我试图追逐那部分

页脚内容  

但它并没有出现在我想要的地方

<style>
    html, body {
    font-family: Helvetica;
    height: 100%; /*important for equal height columns*/
    }

    #wrapper{
    height: 100%; /*important for equal height columns*/
    padding-bottom:60px; /*This must equal the height of your header*/
    }

#header{
background-color: #222;
height: 60px; /*This must equal padding bottom of wrap*/
display:block;
padding: 10px;
color: #fff;
}

#main {
position: relative;
height: 100%; /*important for equal height columns*/
width: 100%;
overflow:auto;
display: table; /* This is needed fo children elements using display table cell*/
table-layout: fixed;
padding-bottom: 80px; /*This needs to match footer height*/
overflow: auto;
}

#side{
background-color: #ccc;
width: 200px;
vertical-align: top;
text-align: center;
padding: 10px 0;
display: table-cell; /*To make sibling columns equal in height*/
}

#side-stuff{
display: block;
}

#content{
background-color: pink;
padding: 20px;
display: table-cell; /*To make sibling columns equal in height*/
}

#content-stuff{
width: auto;
height: auto;
}

#footer{
position: relative;
height: 80px;
margin-top: -80px; /* margin-top is negative value of height */
clear: both;
background-color: #222;
color: #fff;
padding: 10px;

}

</style>



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

<div id="main">

<div id="side">
<div id="side-stuff">
sidebar stuff
</div>
</div>

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

</div>

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

Answer 1

将页脚的div放在侧面的div中

<div id="side">

    <div id="side-stuff">
        sidebar stuff
    </div>

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

Answer 2

希望这有帮助

 <style>
    #wrapper{
    margin:0px auto;
    padding:0px;
    width:1000px;
    }

    #header
    {
    margin:0px;
    padding:0px;
    width:1000px;
    height:100px;
    background-color:lavender;
    }
    #content
    {
    margin:0px;
    padding:0px;
    width:1000px;
    }

    #side
    {
    margin:0px;
    padding:0px;
    width:250px;
    height:700px;
    background-color:grey;
    float:left;
    }
    #main
    {
    margin:0px;
    padding:0px;
    width:750px;
    height:700px;
    float:right;
    }
    #main1
    {
    margin:0px;
    padding:0px;
    width:750px;
    height:650px;
    background-color:pink;
    float:right;
    }
    #footer
    {
    margin:0px;
    padding:0px;
    width:750px;
    height:50px;
    background-color:black;
    float:right;
    }

    </style>
    <div id="wrapper">
            <div id="header"> Header </div>
        <div id="content">
            <div id="side">Side</div>
            <div id="main">
                <div id="main1">Main</div>
                <div id="footer">Footer</div>
            </div>
        </div>
    </div>