CODEWITHSUNDEEP
htmlcsspositionabsolute
sdvnksv
sdvnksv

Reputation: 9668

Place an absolute element in bottom of a container with overflow: auto

I have a logo that should be positioned in the very bottom of a fixed container. It works OK with position: absolute; however if I add overflow-y: auto; to the fixed container and add content that doesn't fit the viewport height, my logo will stick to the bottom of the viewport, not the bottom of the fixed container, thus overlapping the content.

<div class="foo">
    <div class="content"></div>
    <div class="logo-in-the-bottom">Logo</div>
</div>

.foo {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: gray;
    overflow-y: auto;
}
.content {
    height: 1000px;
}
.logo-in-the-bottom {
    position: absolute;
    bottom: 10px; left: 0;
    color: white
}

http://jsfiddle.net/1aoah1r5/

How do I stick it to the bottom of the fixed container no matter the content height?

Upvotes: 0

Views: 1230

Answers (2)

Joel Almeida
Joel Almeida

Reputation: 8037

Try this:

Depending on content:

.foo {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: gray;
    overflow-y: auto;
}
.content {
    min-height: 100%;
    height: 1000px;
    position: relative;
}
.logo-in-the-bottom {
    position: absolute;
    bottom: 10px; left: 0;
    color: white
}
<div class="foo">
    <div class="content">
        <div class="logo-in-the-bottom">Logo</div>
    </div>
</div>

For future references:

Sticky version:

.foo {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: gray;
}
.container {
    width: 100%; height: 100%;
    overflow-y: auto;
}

.content {
    height: 1000px;
}
.logo-in-the-bottom {
    position: absolute;
    bottom: 10px; 
    left: 0;
    color: white
}
<div class="foo">
    <div class="container">
        <div class="content">
        </div>
    </div>
    <div class="logo-in-the-bottom">Logo</div>
</div>

You need to add an extra container with the overflow inside the .foo. Why ? That way the .foo is fixed and the absolute is relative to the fixed position, not the content because the .container is the one overflowing.

On the bottom:

.foo {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: gray;
    overflow-y: auto;
}
.content {
    height: 1000px;
}
.logo-in-the-bottom {
    position: relative; //no need for absolute
    color: white
}
<div class="foo">
    <div class="content">
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
        <div class="logo-in-the-bottom">Logo</div>
    </div>
</div>

Upvotes: 2

pavel
pavel

Reputation: 27082

Put logo into .content (and add bottom padding to .content, if you need to make a space for logo).

<style>
.content {
    height: 1000px;
    position: relative;
}
</style>

<div class="foo">
    <div class="content">
        <div class="logo-in-the-bottom">Logo</div>
    </div>
</div>

http://jsfiddle.net/1aoah1r5/1/

Upvotes: 0

Related Questions