CODEWITHSUNDEEP
css
user299709
user299709

Reputation: 5412

Make a fixed panel to push the content instead of overlap

It needs to push up the existing content up, and make it overflow to make room for the bottom panel. I don't want the bottom panel to overlap anything on the page but thats what is happening. setting the bottom padding didn't help either.

http://jsfiddle.net/vwam5hvm/1/

#panel {
    bottom: 0%;
    width: 100%;
    height: 25%;
    z-index:500;
    position: fixed;
    background-color: white;
    border-top: 1px solid #ddd;
}

Is there a way to achieve this so that the existing content will be pushed up to make room for the bottom panel?

Upvotes: 1

Views: 116

Answers (3)

Arqetech
Arqetech

Reputation: 483

Try this:

#panel {
    bottom: 0;
    width: 100%;
    height: 98px;
    z-index: 500;
    position: fixed;
    background-color: white;
    border-top: 1px solid #ddd;
}

pre {
    position: absolute;
    overflow-y: auto;
    width: 100%;
    top: 0px;
    bottom: 98px;
    margin: 0px;
}

This should give you the results. Hope this helped!

Upvotes: 0

Stickers
Stickers

Reputation: 78686

Set some padding-bottom value on the <body>, make the value the same height as the fixed element. You could use viewport units vh instead of percentage %, because a percentage padding/margin always relative to the width of the containing block, not the height.

body {
    padding-bottom: 25vh;
}
#panel {
    bottom: 0%;
    width: 100%;
    height: 25%; /*or 25vh*/
    z-index: 500;
    position: fixed;
    background-color: white;
    border-top: 1px solid #ddd;
}

jsfiddle

Upvotes: 1

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167182

Okay, if you have padding-bottom for body, it gets pushed up.

#panel {
  bottom:0%;
  width: 100%;
  height: 50px;
  z-index:500;
  position: fixed;
  background-color: white;
  border-top: 1px solid #ddd;
}

body {
  padding-bottom: 55px;
}
<div id='panel'>Hi Hello</div>
<pre>
    asd
    asfd
    
    
    asdf
    
    
    asdf
    
    
    
    
    asdf
    
    
    
    asdf
    
    
    
    
    asdf
    
    
    
    asdf
    
    
    asdf
    
    
    asdf
    
    
    asdf
    
    
    asdfsdaf
    
    
    
    sadf
    
    
    asdf
    
    
    
    asdf
    
    
    
    asdf
    
    
    
    sadf
    
    
    dsfsadf
    
    
    asddfasdf
    
    
    asdfasf
    
    asdfsdaf
</pre>

Upvotes: 3

Related Questions