页脚的地方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

希望这有助于

<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> 

Answer 2

放的地方页脚的一侧的DIV中的DIV

<div id="side"> 

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

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