0

I'm creating a modal.

Here is the fiddle:

http://jsfiddle.net/DzZsg/

I'm fixing a header to my modal using: 

position: fixed;

I have two problems.

  1. The header of the model needs to be fixed when the user scrolls down the model. But for some reason it's overflowing it's parent. Why?

  2. Underneath the header is 'How can I stop this from being hidden under header?' this is hidden under the fixed header, how can I push the contents down?

panthro
  • 22,779
  • 66
  • 183
  • 324

2 Answers2

0

position:fixed; refers to window only , it is totally deconnected from flow or inheritance of your document.

What you look for needs a position:absolute; . Apadding or margin for #page should be applied in order to free room that absolute header already uses.

DEMO

body {
    background: grey;
}
#modal {
    background: white;
    bottom: 0;
    height: 60%;
    left: 0;
    margin: auto;
    position: absolute;
    top: 0;
    right: 0;
    width: 75%;
}
#page {
    padding-top:2em;
    background-color: #272822;
    color: white;
    overflow:auto;
    box-sizing:border-box;
    height:100%;
}
#header {
    background: tomato;
    border-bottom: 2px solid red;
    position: absolute;
    top:0;
    right:17px;/* average 1 em */;
    left:0;
    height:2em;
}
p {
    padding-bottom: 50px;
}
G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129
  • But the header scrolls with the page in your example. I need it to stay at the top – panthro May 23 '14 at 11:41
  • @panthro , right, i fixed this and updatede the demo. scrolling is back on #page – G-Cyrillus May 23 '14 at 11:44
  • Thanks but now the header does not fill the full width of the modal – panthro May 23 '14 at 11:50
  • tune the right coordonates to 0, but it will show over the srolling bar – G-Cyrillus May 23 '14 at 11:55
  • @panthro else , do not use absolute position but regular flow http://jsfiddle.net/DzZsg/3/ you can as well use calc() to tune height if header's height is known http://jsfiddle.net/DzZsg/4/ – G-Cyrillus May 23 '14 at 11:56
  • Actually your regular flow example does not work. You have specified a height for the header. So this won;t work with dynamic content. – panthro May 23 '14 at 12:33
  • you could use the magic flex propertie ... http://jsfiddle.net/DzZsg/6/ and an extra line in header does http://jsfiddle.net/DzZsg/7/ , avalaible for young browser – G-Cyrillus May 23 '14 at 13:07
  • @panthro you could use the magic flex propertie ... http://jsfiddle.net/DzZsg/6 and an extra line in header does http://jsfiddle.net/DzZsg/7 , avalaible for young browser other options : http://jsfiddle.net/DzZsg/8 http://jsfiddle.net/DzZsg/9 – G-Cyrillus May 23 '14 at 15:32
-1

in the style #header use "width: 371px;" rather than "width:100%;"

Najib
  • 500
  • 2
  • 8