Forums

Manojsethi

My CSS

body {
    margin:0;
    width:100%;
}

#page {
    background-image:url(Images/bg4.jpg);
    background-repeat:repeat;
    height:100%;
  position:relative;
}
#headerback {
    background:#000;
    height:125px; 
    left:0; 
    width:100%; 
    top:0; 
    border-color:black;
}
#header {
    background-color:black;
    width:1024px;
    height:125px;
    border-top-left-radius:5px;
    border-top-right-radius:5px;
    margin:0 auto;
    color: #FFFFFF;
}
.header-image {
    display:block;
    width:248px;
    height:124px;
    max-height:100%;
    max-width:100%;
    overflow:hidden;
    margin-left:10px;
    float:left;
}
.header-text {
    text-decoration-style:wavy;
    font-family:'Adobe Hebrew';
    font-size:25px;
    color:whitesmoke;
    margin-top:15px;
    margin-left:50px;
    width:550px;
    float:left;
    text-align: center;
}
.header-text-bottom {
    text-decoration-style:wavy;
    font-family:'Adobe Hebrew';
    font-size:20px;
    color:whitesmoke;
    margin-left:300px;
    width:200px;
    margin-top:10px;
    float:left;
    text-align: right;
}

#Content-body {
    background:#d9bf30;
    height:auto !important; 
    height:100%; 
    position:relative;
    width: 1024px;
    text-align: left;
    margin: 0 auto;
    min-height:100%;
}
#footer {
  background:#000;
  width:100%;
  height:100px;
  position:absolute;
  bottom:0;
  left:0;
}

My HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Doctor Online</title>
  <link href="css/ticker-style.css" rel="stylesheet" type="text/css" />
    <link href="style.css" rel="stylesheet" type="text/css" />
    <link href="css/scroll.css" rel="stylesheet" type="text/css" />
  <link href="css/navigationbar.css" rel="stylesheet" type="text/css" />

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script> 
  <script src="js/jquery.ticker.js" type="text/javascript"></script>
  <script src="js/site.js" type="text/javascript"></script>
    <script src="js/scroll.js" type="text/javascript"></script>
</head>
<body>
    <div id="page">
        <form id="form1" runat="server">
            <div id="headerback">
                <div id="header">
                    <div class="header-image">
                        <img src="Images/logo.png" style="width: 245px" />
                    </div>
                    <div class="header-text">
                        We have not lost faith, but we have transferred it from GOD to Medical Profession.
                    <div class="header-text-bottom">George Bernard Shaw</div>
                    </div>

                </div>
            </div>

            <div id="Content-body">

                <!-- This div is used to indicate the original position of the scrollable fixed div. -->
                <div class="scroller_anchor"></div>

                <!-- This div will be displayed as fixed bar at the top of the page, when user scrolls -->
                <div class="scroller">
                    <ul id="js-news" class="js-hidden">
                        <li class="news-item">A fit, healthy body that is the best fashion statement ― Jess C. Scott</li>
                        <li class="news-item">“The greatest wealth is Health.”</li>
                        <li class="news-item">“Those who think they have no time for exercise will sooner or later have to find time for illness.”  ~Edward Stanley</li>
                        <li class="news-item">“Time And health are two precious assets that we don’t recognize and appreciate until they have been depleted.”  ~Denis Waitley</li>
                        <li class="news-item">“From the bitterness of disease man learns the sweetness of health.”  ~Catalan Proverb</li>
                        <li class="news-item">“Take care of your body. It’s the only place you have to live.”  ~Jim Rohn</li>
                        <li class="news-item">“Your body is a temple, but only if you treat it as one.”  ~Astrid Alauda</li>
                        <li class="news-item">“Healthy citizens are the greatest asset any country can have.” ― Winston Churchill</li>
                    </ul>

                    <ul id="nav_rounded">
                        <li><a href="#">Home</a></li>
                        <li><a href="#">About Us</a></li>
                        <li><a href="#">Search Doctors</a></li>
                        <li><a href="#">Login</a></li>
                        <li><a href="#">Sign Up</a></li>
                    </ul>

                </div>

            </div>
        </form>
        <div id="footer"></div>
    </div>
</body>
</html>

Paulie_D

I would suggest that you put this in Codepen as it's difficult to analyse from the raw code.

Paulie_D

Certainly you can't do this....

  height:auto !important; 
  height:100%;

Manojsethi

@paulie_d :- Sir can you please tell me what to do to make it correct

JamesMD

Do you mean the footer is not sticking to the bottom?

Manojsethi

@JamesMD :- No Sir My Footer is sticking to bottom but I want my content area to expand till footer irrespective of the content in it.

Paulie_D

http://css-tricks.com/snippets/css/sticky-footer/

http://codepen.io/Paulie-D/pen/ozvGA

treehouse : what would you like to learn today?

Forums

Content area is not expanding to footer