CSS Layout for Footer at Bottom with Dynamic Ajax Content Changing Height of Page

css layout for footer at bottom with dynamic ajax content changing height of page

It sounds like your footer is using display: fixed or similar. Try changing the container of your footer to:

bottom: 0;
display: block;
position: absolute;

That will ensure it appears right at the bottom of whatever container it sits within (I'm assuming the <body> tag). Your problem now becomes ensuring that it appears at the bottom of the screen rather than the bottom of your document, which starts of being much shorter. You could accomplish this in a couple of ways, but perhaps the easiest would be to set a minimum height on your AJAX content container:

min-height: 600px;
height: auto !important /* This is a hack to make IE6 fix itself to a set height */
height: 600px; /* IE6 will always follow whatever instruction appears last, even if !important is specified */

The other approach is since you're using a JavaScript library (I assume?) to grab the required content, perhaps you could also adjust the height of the AJAX content container or change the footer's CSS once that content has loaded?

Keep footer at bottom of page when page height dynamically changes using CSS

First of all if you want to use position: absolute, then the parent should be other that the initial position, like position: relative or it will look the first parent element what is positioned relative. So if you add the position: relative to body, the footer will be dynamic.

But absolutely positioned elements are completely removed from the document flow, so in this case it will overlap on other elements, but we can solve if we add the transform: translateY(100%)

so in the end you will have:

body {
    margin: 0;
    position: relative;
}

footer {
    position: absolute;
    background: #ededed;
    padding: 25px;
    color: #000;
    right: 0;
    bottom: 0;
    left: 0;
    transform: translateY(100%);
}

Place div on bottom of page with dynamic content

You're going to want to check out "CSS Sticky Footer": https://css-tricks.com/snippets/css/sticky-footer/
That's the solution you're looking for.

footer at bottom with ajax loaded content

Do this

<footer style="position: fixed; bottom: 0; width: 100%;"> </footer>

You can also read about flex it is supported by all modern browsers

Update:
I read about flex and tried it. It worked for me. Hope it does the same for you. Here is how I implemented.Here main is not the ID it is the <main> div

body {
    margin: 0;
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

main {
    display: block;
    flex: 1 0 auto;
}

Here you can read more about flex https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Do keep in mind it is not supported by older versions of IE.

How do you get the footer to stay at the bottom of a Web page?

To get a sticky footer:

Have a <div> with class="wrapper" for your content.
Right before the closing </div> of the wrapper place the
<div class="push"></div>.
Right after the closing </div> of the wrapper place the
<div class="footer"></div>.

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
    height: 142px; /* .push must be the same height as .footer */
}

Make footer DIV stay bottom after AJAX content load

The problem comes from the percentage heights you've set to the elements. You need to either give the #body element an auto height, or make it respond to content changes using overflow property.

I'm not encouraging the use of inline styles

<body style="width:100%; height:100%;" onload="displayContent()">    <div id="main" style="width:100%; height:100%;" >        <div id="header" style="width:100%; height:10%;">            <div style="width:100%; height:100%;">                <div  style="display:inline; float:left; width:10%; height:100%;">Logo</div>                <div  style=" display:inline; float:right; width:90%; height:100%;">Navigation Links</div>            </div>        </div>        <div style="width:100%; height:5%;">            Navigation links go here        </div>        <div id="body" style="width:100%; height:auto; overflow: hidden;">            <div id="content" style="display:inline; float:left; width:70%; height:100%;">Main content from AJAX call after page onload goes hereMain content from AJAX call after page onload goes hereMain content from AJAX call after page onload goes hereMain content from AJAX call after page onload goes hereMain content from AJAX call after page onload goes hereMain content from AJAX call after page onload goes hereMain content from AJAX call after page onload goes hereMain content from AJAX call after page onload goes hereMain content from AJAX call after page onload goes hereMain content from AJAX call after page onload goes hereMain content from AJAX call after page onload goes hereMain content from AJAX call after page onload goes here</div>            <div  style="display:inline; float:right; width:30%; height:100%; background:red;">Other stuff here</div>        </div>        <div id="footer" style="width:100%; height:10%;">            FOOTER NEEDS TO UPDATE ITSELF AFTER AJAX CALL        </div>    </div></body>

Left sidebar same height as content area, footer at bottom of browser window

Without flexbox according to the given HTML

Set a height for footer, e.g. 50px.
Main content, sidebar and .content on the right side:
height: calc(100vh - 100px) (50px navbar height and 50px footer height).
Set .content on the right side overflow-y: auto.

Example

main,main aside,main .content {  height: calc(100vh - 100px);}
main {  margin-top: 50px;}
main aside,main .content {  padding: 15px 0;}
main aside {  background: red;}
main .content {  overflow-y: auto;  background: blue;}
.footer {  height: 50px;  line-height: 50px;  background: #F8F8F8;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script><link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="navbar navbar-fixed-top navbar-default" role="navigation">  <div class="container-fluid">    <div class="navbar-header">      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">          <span class="icon-bar"></span>          <span class="icon-bar"></span>          <span class="icon-bar"></span>        </button>      <a class="navbar-brand" href="#">Project name</a>    </div>    <div class="collapse navbar-collapse">      <ul class="nav navbar-nav">        <li class="active"><a href="#">Home</a></li>        <li><a href="#about">About</a></li>        <li><a href="#contact">Contact</a></li>      </ul>    </div>    <!-- /.nav-collapse -->  </div>  <!-- /.container --></div><!-- /.navbar -->
<main>  <div class="container-fluid">    <div class="row">      <aside class="hidden-xs col-sm-3">        <ul>          <li>List 1</li>          <li>List 2</li>          <li>List 3</li>          <li>List 4</li>          <li>List 5</li>        </ul>      </aside>      <div class="content col-sm-9">        <div class="jumbotron">          <a href="#" class="visible-xs" data-toggle="offcanvas"><i class="fa fa-lg fa-reorder"></i></a>          <h1>test</h1>          <p>This is an example to show the potential of an offcanvas layout pattern in Bootstrap. Try some responsive-range viewport sizes to see it in action.</p>        </div>        <div class="col-xs-12">          <h2>Heading</h2>          <p>Bootstrap is a front-end framework that uses CSS and JavaScript to facilitate responsive Web design. Bootply is a playground for Bootstrap that enables developers and designers to test, prototype and create mockups using Bootstrap friendly HTML,            CSS and Javascript.</p>          <p><a class="btn btn-default" href="#">View details »</a></p>        </div>        <div class="col-xs-12">          <h2>Heading</h2>          <p>Bootstrap is a front-end framework that uses CSS and JavaScript to facilitate responsive Web design. Bootply is a playground for Bootstrap that enables developers and designers to test, prototype and create mockups using Bootstrap friendly HTML,            CSS and Javascript.</p>          <p><a class="btn btn-default" href="#">View details »</a></p>        </div>        <div class="col-xs-12">          <h2>Heading</h2>          <p>Bootstrap is a front-end framework that uses CSS and JavaScript to facilitate responsive Web design. Bootply is a playground for Bootstrap that enables developers and designers to test, prototype and create mockups using Bootstrap friendly HTML,            CSS and Javascript.</p>          <p><a class="btn btn-default" href="#">View details »</a></p>        </div>        <div class="col-xs-12">          <h2>Heading</h2>          <p>Bootstrap is a front-end framework that uses CSS and JavaScript to facilitate responsive Web design. Bootply is a playground for Bootstrap that enables developers and designers to test, prototype and create mockups using Bootstrap friendly HTML,            CSS and Javascript.</p>          <p><a class="btn btn-default" href="#">View details »</a></p>        </div>      </div>    </div>  </div></main>
<footer class="footer">  <div class="container-fluid">    Footer  </div></footer>

CSS Layout for Footer at Bottom with Dynamic Ajax Content Changing Height of Page