How to remove the scroller from the sticky footer at the bottom of the page (not below the window)? When I extract the content and height = 100% from the sidebar, I am no longer taking scroller. However, while doing so, my content and sidebar do not fill up all the places in the footer.
DOCTYPE HTML PUBLIC "- // W3C // DTD XHTML 1.0 Transcription // N" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> & Lt; Html xmlns = "http://www.w3.org/1999/xhtml" & gt; & Lt; Top & gt; & Lt; Meta content = "text / html; charset = UTF-8" http-equiv = "content-type" /> & Lt; Title & gt; Untitled 13 & lt; / Title & gt; & Lt; Style media = "all" type = "text / css" & gt; * {Margin: 0; Padding: 0; } Html, body, # wapar, look {height: 100%; } #wop, #footer {width: 750px; Margin: 0 auto; } #wap {background: # CFF; } Html, body {color: # 000; Background: # a7a09a; } Body & gt; # Wapper {height: 100%; Minimum height: 100%; } Form {/ * height: auto; * / Min-height: 100%; } # Male {background: # 000; Height: 100%; Minute-height: 100%; Height: Auto! Important; * /} # Content {height: 100%; Swim left; Padding: 10px; Swim left; Width: 570px; Background: # 9C9; } #sidebar {height: 100%; Swim left; Width: 140px; Background: # c99; Padding: 10px; } #footer {status: relative; Margin-top: -100px; Height: 100 pixels; Clean both; Background: #cc9; Bottom: 0; } .clarfix: after {content: "."; Display area; Height: 0; Clean both; Visibility: hidden; } .clearfix {display: inline-block; } * Html .clarfix {height: 1%; } .clearfix {display: block; } #header {/ * padding: 5px 10px; * / Background: #ddd; } & Lt; / Style & gt; & Lt; / Head & gt; & Lt; Body & gt; & Lt; Form id = "form1" runat = "server" & gt; & Lt; Div id = "wrap" & gt; & Lt; Div id = "main" class = "clearfix" & gt; & Lt; Div id = "header" & gt; & Lt; H1 & gt; Header & lt; / H1> & Lt; / Div & gt; & Lt; Div id = "sidebar" & gt; & Lt; H2 & gt; Sidebar & lt; / H2 & gt; & Lt; / Div & gt; & Lt; Div id = "content" & gt; & Lt; H2 & gt; Main content & lt; / H2 & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div id = "footer" & gt; & Lt; H2 & gt; Footer & lt; / H2 & gt; & Lt; / Div & gt; & Lt; / Form & gt; & Lt; / Body & gt; & Lt; / Html & gt;
I used it with 100% min-height using a container diva After that, I have the page contents and footer in the container. Here's my HTML:
& lt; Div id = "maincontainer" & gt; & Lt; Div id = "full page" & gt; & Lt; / Div & gt; & Lt; Div id = "footer" & gt; & Lt; / Div & gt; & Lt; / Div & gt;
And here's my common CSS:
html, body, #MainContainer {min-height: 100%; / * Sets the minimum height to the height of the viewport. * / Height: 100%; / * Effectively, this is the minimum height for IE5 + / Win, as IE spreads an element incorrectly to attach its content. This misspelled scans modern browsers * / margins: 0; Padding: 0; } Html & gt; Body #MainContainer {Height: Auto; / * It dislikes IE Hack, it uses child selector secretly from IE. * # Main Continent {Status: Completed; Top: 0; Left: 0; Width: 100%; } #phoolpage {height: auto; Width: 100%; Minimum height: 100%; Margin: 0; Padding: 0 25 px 0; Hidden flurry; } #footer {clear: both; Left: 0; Width: 100%; Height: 20px; Status: Completed; Bottom: 0; }
Comments
Post a Comment