Menu
CSS
* {
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;
}
HTML
<body>
<div id="topHeaderBar"></div>
<div id="wrapper">
<div id="bodyWrapper">
<div id="header">
<jsp:include page="menu.jsp"></jsp:include>
</div>
<div id="bodyDiv" style="position: relative;">body content</div>
<div id="footer">
<jsp:include page="footer.jsp"></jsp:include>
</div>
</div>
</body>
Please help me out, I'm not able to adjust footer at bottom of page
when body contents are less footer will be shifted upwards and min-height:550px in #bodyDiv creates problem in different screen resolutions
222
If you want to keep the footer at the bottom of the text (sticky footer), but keep it from always staying at the bottom of the screen, you can use: position: relative; (keeps the footer in relation to the content of the page, not the view port) and clear: both; (will keep the footer from riding up on other content).
Quick answer: Add “display:flex; flex-direction:column; min-height:100vh;” to body or appropriate layout body element, then add “flex:1;” to content wrapper element/section.
Try this:
#footer {
background: url("../images/footer_back.png") repeat-x scroll left top transparent;
height: 100px;
margin-top: -50px;
position: fixed;
bottom:0;
width: 100%;
z-index: 1;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
