CODEWITHSUNDEEP
jquerycssjquery-plugins
Dnns
Dnns

Reputation: 2844

Set width of a "Position: fixed" div relative to parent div

I'm trying to give a div (position: fixed) the width of 100% (relating to it's parent div). But I've got some problems...

Fox example

#container {
    width: 800px;
}

#fixed {
    position: fixed;
    width: 100%;
}

and the html

<div id="container">
    <div id="fixed">Sitename</div>
    <p>
        blaat
    </p>
</div>

Or you can try it out: http://jsfiddle.net/4bGqF/

The problems seems to be that the fixed element is always taking the width of the window/document. Does anyone know how the fix this?

I can't give my fixed element a fixed with, because I'm using the jScrollPane plugin. It depends on the content whether there's a scrollbar or not.

PS: The text of the 2 divs are on top of each other. This is just an example so that doesn't really matter.

Upvotes: 231

Views: 346759

Answers (11)

jeroen
jeroen

Reputation: 91734

I´m not sure as to what the second problem is (based on your edit), but if you apply width:inherit to all inner divs, it works: http://jsfiddle.net/4bGqF/9/

You might want to look into a javascript solution for browsers that you need to support and that don´t support width:inherit

Upvotes: 168

Rabbani
Rabbani

Reputation: 51

For sticky header with jquery, I am still a learner in jquery these css settings worked.

header.sticky{
    position: fixed;
    border-radius: 0px;
    max-height: 70px;
    z-index: 1000;
    width: 100%;
    max-width: inherit;
}

header is inside a wrapper div which is with max width of 1024.

Upvotes: 5

Khachik
Khachik

Reputation: 71

You need to give the same style of the fixed element and its parent element. One of these examples is created with max widths and in the other example with paddings. 

* {
  box-sizing: border-box
}
body {
  margin: 0;
}
.container {
  max-width: 500px;
  height: 100px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  background-color: lightgray;
}
.content {
  max-width: 500px;
  width: 100%;
  position: fixed;
}
h2 {
  border: 1px dotted black;
  padding: 10px;
}
.container-2 {
  height: 100px;
  padding-left: 32px;
  padding-right: 32px;
  margin-top: 10px;
  background-color: lightgray;
}
.content-2 {
  width: 100%;
  position: fixed;
  left: 0;
  padding-left: 32px;
  padding-right: 32px;
}
<div class="container">
  <div class="content">
    <h2>container with max widths</h2>
  </div>
</div>

<div class="container-2">
  <div class="content-2">
    <div>
      <h2>container with paddings</h2>
    </div>
  </div>
</div>

Upvotes: 1

Multicam
Multicam

Reputation: 1248

fixed position is a bit tricky (indeed impossible), but position: sticky is doing the trick beautifully:

<div class='container'>
  <header>This is the header</header>
  <section>
    ... long lorem ipsum
  </section>
</div>



body {
  text-align: center;  
}

.container {
  text-align: left;
  max-width: 30%;
  margin: 0 auto;
}


header {
  line-height: 2rem;
  outline: 1px solid red;
  background: #fff;
  padding: 1rem;

  position: sticky;
  top: 0;
}

see the codepen sample

Upvotes: 111

aequalsb
aequalsb

Reputation: 4035

As many people have commented, responsive design very often sets width by %

width:inherit will inherit the CSS width NOT the computed width -- Which means the child container inherits width:100%

But, I think, almost as often responsive design sets max-width too, therefore:

#container {
    width:100%;
    max-width:800px;
}
#contained {
    position:fixed;
    width:inherit;
    max-width:inherit;
}

This worked very satisfyingly to solve my problem of making a sticky menu be restrained to the original parent width whenever it got "stuck"

Both the parent and child will adhere to the width:100% if the viewport is less than the maximum width. Likewise, both will adhere to the max-width:800px when the viewport is wider.

It works with my already responsive theme in a way that I can alter the parent container without having to also alter the fixed child element -- elegant and flexible

ps: I personally think it does not matter one bit that IE6/7 do not use inherit

Upvotes: 74

Skeets
Skeets

Reputation: 4828

This solution meets the following criteria

  1. Percentage width is allowed on parent
  2. Works after window resize
  3. Content underneath header is never inaccessible

As far as I'm aware, this criteria cannot be met without Javascript (unfortunately).

This solution uses jQuery, but could also be easily converted to vanilla JS:

function fixedHeader(){
  $(this).width($("#wrapper").width());
  $("#header-filler").height($("#header-fixed").outerHeight());
}

$(window).resize(function() {
  fixedHeader();
});

fixedHeader();
#header-fixed{
  position: fixed;
  background-color: white;
  top: 0;
}
#header-filler{
  width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<div id="header-fixed">
  This is a nifty header! works even when resizing the window causing a line break
</div>
<div id="header-filler"></div>

[start fluff]<br>
a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
[end fluff]

</div>

Upvotes: 2

Sab Devadasan
Sab Devadasan

Reputation: 31

There is an easy solution for this.

I have used a fixed position for parent div and a max-width for the contents.

You don't need to think about too much about other containers because fixed position only relative to the browser window. 

       .fixed{
            width:100%;
            position:fixed;
            height:100px;
            background: red;
        }

        .fixed .content{
            max-width: 500px;
            background:blue;
            margin: 0 auto;
            text-align: center;
            padding: 20px 0;
        }
<div class="fixed">
  <div class="content">
     This is my content
  </div>
</div>

Upvotes: 3

user3173364
user3173364

Reputation:

You can also solve it by jQuery:

var new_width = $('#container').width();
$('#fixed').width(new_width);

This was so helpful to me because my layout was responsive, and the inherit solution wasn't working with me!

Upvotes: 15

Senica Gonzalez
Senica Gonzalez

Reputation: 8182

Here is a little hack that we ran across while fixing some redraw issues on a large app.

Use -webkit-transform: translateZ(0); on the parent. Of course this is specific to Chrome.

http://jsfiddle.net/senica/bCQEa/

-webkit-transform: translateZ(0);

Upvotes: 4

Thomas Shields
Thomas Shields

Reputation: 8942

Fixed positioning is supposed to define everything in relation to the viewport, so position:fixed is always going to do that. Try using position:relative on the child div instead. (I realize you might need the fixed positioning for other reasons, but if so - you can't really make the width match it's parent with out JS without inherit)

Upvotes: 9

rbrtbn
rbrtbn

Reputation: 404

Use this CSS:

#container {
    width: 400px;
    border: 1px solid red;
}

#fixed {
    position: fixed;
    width: inherit;
    border: 1px solid green;
}

The #fixed element will inherit it's parent width, so it will be 100% of that.

Upvotes: 15

Related Questions