如何在兩個垂直導航條之間放置頁面底部的DIV

Question

我無法做到兩件事。我總是可以完成一個，但不是另一個。我希望我的頁腳總是出現在頁面的底部，並佔用內容容器的100％寬度。

html, 
 
body { 
 
    margin: 0px; 
 
    padding: 0px; 
 
    height: 100%; 
 
    width: 100%; 
 
    border: none; 
 
} 
 
#wrapper { 
 
    position: relative; 
 
    width: 100%; 
 
    min-width: 940px; 
 
    min-height: 100%; 
 
    height: 100%; 
 
    border: 1px solid #ff0000; 
 
} 
 
#nav_open { 
 
    position: absolute; 
 
    top: 0px; 
 
    left: 0px; 
 
    width: 125px; 
 
    height: 100%; 
 
    border: 1px solid #ff0000; 
 
} 
 
#content { 
 
    top: 0px; 
 
    margin-left: 126px; 
 
    margin-right: 201px; 
 
    min-height: 100%; 
 
    height: 100%; 
 
    border: 1px solid #ff0000; 
 
} 
 
#nav_closed { 
 
    position: absolute; 
 
    top: 0px; 
 
    right: 0px; 
 
    width: 200px; 
 
    height: 100%; 
 
    border: 1px solid #ff0000; 
 
} 
 
#content_header { 
 
    border: 1px solid #ff0000; 
 
} 
 
#content_body { 
 
    border: 1px solid #ff0000; 
 
} 
 
#content_footer { 
 
    height: 15px; 
 
    background: #df781c; 
 
    border: 1px solid #ff0000; 
 
}

<div id="wrapper"> 
 
    <div id="nav_open"> 
 
    nav_open 
 
    </div> 
 

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

 
    <div id="content_body"> 
 
     content_body 
 
    </div> 
 

 
    <div id="content_footer"> 
 
     Footer 
 
    </div> 
 
    </div> 
 

 
    <div id="nav_closed"> 
 
    nav_closed 
 
    </div> 
 
</div>

Answer 1

的.html：

<div id="wrapper"> 
<div id="nav_open"> 
    nav_open 
</div> 

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

    <div id="content_body"> 
    content_body 
    </div> 

<div id="nav_closed"> 
    nav_closed 
</div> 
</div> 

    <div style="clear:both;">&nbsp;</div> 
    <div id="content_footer"> 
    Footer 
    </div> 
</div> 

CSS：

html, body { margin: 0px; 
    padding: 0px; 
    height: 100%; 
    width: 100%; 
    border: none; 
    } 

#wrapper { position: relative; 
    width: 100%; 
    min-width: 940px; 
    min-height: 100%; 
    height: 100%; 

    border: 1px solid #ff0000; 
    } 

#nav_open { position: absolute; 
    top: 0px; 
    left: 0px; 
    width: 125px; 
    height: 100%; 

    border: 1px solid #ff0000; 
      } 

#content { top: 0px; 
    margin-left: 126px; 
    margin-right: 201px; 
    min-height: 100%; 
    height: 100%; 

    border: 1px solid #ff0000; 
    } 

#nav_closed { position: absolute; 
    top: 0px; 
    right: 0px; 
    width: 200px; 
    height: 100%; 

    border: 1px solid #ff0000; 
      } 

#content_header { border: 1px solid #ff0000; 
    } 

#content_body { border: 1px solid #ff0000; 
    } 

#content_footer { height: 15px; 

    background: #df781c; 
    border: 1px solid #ff0000; 
    text-align:center; 
    line-height:15px; 
    }