Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to keep footer at bottom of page?
    primarykey
    data
    text
    <p><strong>CSS</strong></p> <pre><code> * { margin: 0px; padding: 0px; } html { margin: 0px; padding: 0px; } body { line-height: 1; margin: 0px; padding:0px; background:url("../images/22.jpg") scroll center top #16202C; /* box-shadow: 0 0 225px rgba(0, 0, 0, 0.45) inset; -webkit-box-shadow: 0 0 225px rgba(0, 0, 0, 0.45) inset; -moz-box-shadow: 0 0 225px rgba(0, 0, 0, 0.45) inset; -o-box-shadow: 0 0 225px rgba(0, 0, 0, 0.45) inset; */ color: #464646; font: 13px/17px arial, sans-serif; min-width: 1300px; } #wrapper { margin: 0px; } #header { height: 40px; width: 100%; } #bodyWrapper { width: 980px; margin: 0px auto; position: relative; z-index: 2; -webkit-box-shadow: 0px 0px 2px #000 outset; -moz-box-shadow: 2px 0px 2px #000 outset; box-shadow: 20px 0px 2px #000 outset; } #bodyDiv { min-height: 550px; height: 100%; background:#fff; padding:20px 10px; } #footer { background: url("../images/footer_back.png") repeat-x scroll left top transparent; height: 100px; margin-top: -50px; position: relative; width: 100%; z-index: 1; } </code></pre> <p><strong>HTML</strong></p> <pre><code>&lt;body&gt; &lt;div id="topHeaderBar"&gt;&lt;/div&gt; &lt;div id="wrapper"&gt; &lt;div id="bodyWrapper"&gt; &lt;div id="header"&gt; &lt;jsp:include page="menu.jsp"&gt;&lt;/jsp:include&gt; &lt;/div&gt; &lt;div id="bodyDiv" style="position: relative;"&gt;body content&lt;/div&gt; &lt;div id="footer"&gt; &lt;jsp:include page="footer.jsp"&gt;&lt;/jsp:include&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; </code></pre> <p>Please help me out, I'm not able to adjust footer at bottom of page<br> when body contents are less footer will be shifted upwards and min-height:550px in #bodyDiv creates problem in different screen resolutions</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload