如何使用内部的div调整固定的div / nav大小？

Question

I'm pretty fresh to web development and cannot figure this one out. Appreciate any help!

On re-size the fixed div moves out of the container instead of re-sizing. The site I'm working on has the nav as the fixed section and is inside of the main container.

Any help is appreciated. Thanks!

<div class="container">
<div class="fixed"></div>
</div>

.container {
  border: 1px solid;
  max-width: 600px;
  width: 100%;
  min-height: 1600px;
}

.fixed {
  max-width: 600px;
  width: 100%;
  height: 50px;
  border: 1px solid green;
  position: fixed;
}

http://jsfiddle.net/KqvQr/

Answer 1

When you specify position as fixed the Element, even thought it is inside a parent container, It won't behave as a child of a parent container. It won't adjust his width according to the parent width. But I can give you a solution where when user resize the page the fixed element also get resize yet it is a position fixed

.fixed {
   height: 50px;
   border: 1px solid green;
   position: fixed;
   right:0;
   left:0;
}

Don't specify widths for the container. instead of that specify left and right values. so then when page is resizing css only check for the left and right margin values. by keeping those values it will adjust its inner width always.

Here is the working fiddle http://jsfiddle.net/KqvQr/5/

Answer 2

I don't think you can achieve what you want if you stick with that constraints. Your width and max-width will work as expected if you change your position to relative instead of fixed ..

Check out this Fiddle