Fixed div with 100% width in body-content

Question

I am using bootstrap and am trying to fix a div to the top of the body-container div.
Using this css, I am able to accomplish fixing the div to the top of the container, but it spills outside the right of the body-container div:

.top-bar {
    position: fixed;
    z-index: 1030;
    top: 60px;
    width: 100%;
}
.top-bar .item-count h4{   
    text-align: center;
}

Here is the all my html/css: https://jsfiddle.net/rttvqa3k/

What is it that you are trying to accomplish? You want to position that top bar inside your `body-content` element? Because if that's the case you shouldn't be using `position: fixed` , the element will be positioned relative to the viewport not the parent element. — Ricky Ruiz, Aug 24 '16 at 17:37
I am trying to get `top-bar` to be a sticky element at the top of `body-content`. — Nate Anderson, Aug 24 '16 at 17:43

score 1 · Accepted Answer · answered Aug 24 '16 at 17:46

Check this if its helpful.. :)

OLD:

<div class="top-bar panel panel-default">
    <div class="panel-body row">
        <div class="col-xs-4 col-sm-4 col-md-4">
            <button class="btn btn-default">Button 1</button>
            <button class="btn btn-default">Button 2</button>
        </div>
        <div class="col-xs-4 col-sm-4 col-md-4 matter-count">
            <h4>### Items in Report</h4>
        </div>
        <div class="col-xs-4 col-sm-4 col-md-4">
            <button class="btn btn-default pull-right">Button 3</button>
        </div>
    </div>
</div>

NEW:

<div class="navbar-fixed-top container" style="top:60px;">    
    <div class="panel panel-default">

    <div class="panel-body row">
        <div class="col-xs-4 col-sm-4 col-md-4">
            <button class="btn btn-default">Button 1</button>
            <button class="btn btn-default">Button 2</button>
        </div>
        <div class="col-xs-4 col-sm-4 col-md-4 matter-count">
            <h4>### Items in Report</h4>
        </div>
        <div class="col-xs-4 col-sm-4 col-md-4">
            <button class="btn btn-default pull-right">Button 3</button>
        </div>
    </div>
      </div>
</div>

That solved my issue, thanks! I assume that the navbar-fixed-top uses bootstrap.js functionality? — Nate Anderson, Aug 24 '16 at 17:50

score 0 · Answer 2 · edited May 23 '17 at 10:33

0

This answer explains the issue with position: fixed relative to a container. The answer does offer ways to accomplish this but it deals with known widths.

The problem with using "fixed" positioning is that it takes the element out of flow. thus it can't be re-positioned relative to its parent because it's as if it didn't have one.

edited May 23 '17 at 10:33

Community

1
1

answered Aug 24 '16 at 17:41

Jesse Johnson

1,638
15
25

Yeah, I had seen that answer, but I am not dealing with known widths. I was hoping to use just bootstrap/css, but if that's not possible I'll have to use some javascript. – Nate Anderson Aug 24 '16 at 17:45
1

Seems like pure CSS solution might be a little hacky. Have you looked into using [Bootstrap's affix plugin](http://getbootstrap.com/javascript/#affix)? – Jesse Johnson Aug 24 '16 at 17:49
I hadn't seen that before, I'll check that out! Thanks! – Nate Anderson Aug 24 '16 at 17:51

score 0 · Answer 3 · answered Aug 24 '16 at 17:47

0

You can set the width or the max-width (.top-bar width 750px) of the fixed element, but then you will have to deal with the media queries for different screen sizes.

answered Aug 24 '16 at 17:47

Vcasso

1,328
1
8
14

score 0 · Answer 4 · answered Aug 24 '16 at 18:13

I'll just post this so that you get things clear since it would be too long for a comment in the answer marked as correct.

There are several values you can use in the CSS property position.

Static, which is the default, relative, absolute and fixed.

Read more about that here.

If you use position: fixed; without defining top and left values, your element will default these values to where its parent element is rendered.

Here's an example for clarity:

If your body content has padding-left: 15px; your element with position: fixed; will have a default value of left: 15px;. The same goes for top, if your parent element is positioned (X)px top from the viewport, lets say X equals to 60 your position: fixed; element will default to top: 60px;

You can see this behavior here: (Notice that I did not reference bootstrap.js so you can see it has nothing to do with your problem.)

.top-bar {
    position: fixed;
    z-index: 1030;
    width: 100%;
}

body {
  padding-top: 135px;
}
footer {
  text-align: center;
}
.top-bar {
  position: fixed;
  z-index: 1030;
  width: 100%;
}
.top-bar .matter-count h4 {
  text-align: center;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<body>
  <div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="/">Application name</a>
      </div>
      <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
          <li><a class="navbar-brand" href="/">Home</a>
          </li>
        </ul>

      </div>
    </div>
  </div>
  <div class="container body-content">


    <div class="top-bar panel panel-default">
      <div class="panel-body row">
        <div class="col-xs-4 col-sm-4 col-md-4">
          <button class="btn btn-default">Button 1</button>
          <button class="btn btn-default">Button 2</button>
        </div>
        <div class="col-xs-4 col-sm-4 col-md-4 matter-count">
          <h4>### Items in Report</h4>
        </div>
        <div class="col-xs-4 col-sm-4 col-md-4">
          <button class="btn btn-default pull-right">Button 3</button>
        </div>
      </div>
    </div>
    <div class="panel panel-primary">
      <div class="panel-heading">
        Some region
      </div>
      <div class="panel-body">
        some content
        <br/>
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br/>some more content
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br/>event more content
      </div>
    </div>
    <div class="panel panel-primary">
      <div class="panel-heading">
        Some region
      </div>
      <div class="panel-body">
        some content
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />some more content
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />event more content
      </div>
    </div>

    <hr />
    <footer>
      <p>&copy; Some Application</p>
    </footer>
  </div>

</body>

So the correct approach is to set this properties so they don't default.

This way:

.top-bar {
    position: fixed;
    top: 60px;
    left: 0;
    z-index: 1030;
    width: 100%;
}

body {
    padding-top: 135px;
}
footer {
  text-align: center;
}


.top-bar {
    position: fixed;
    top: 60px;
    left: 0;
    z-index: 1030;
    width: 100%;
}
.top-bar .matter-count h4{   
    text-align: center;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="/">Application name</a>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li><a class="navbar-brand" href="/">Home</a></li>
                </ul>
                
            </div>
        </div>
    </div>
    <div class="container body-content">
    
    
    <div class="top-bar panel panel-default">
    <div class="panel-body row">
        <div class="col-xs-4 col-sm-4 col-md-4">
            <button class="btn btn-default">Button 1</button>
            <button class="btn btn-default">Button 2</button>
        </div>
        <div class="col-xs-4 col-sm-4 col-md-4 matter-count">
            <h4>### Items in Report</h4>
        </div>
        <div class="col-xs-4 col-sm-4 col-md-4">
            <button class="btn btn-default pull-right">Button 3</button>
        </div>
    </div>
</div>
<div class="panel panel-primary">
    <div class="panel-heading">
        Some region
    </div>
    <div class="panel-body">
        some content
        <br/>
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br/>
        some more content
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br/>
        event more content
    </div>
</div>
<div class="panel panel-primary">
    <div class="panel-heading">
        Some region
    </div>
    <div class="panel-body">
        some content
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        some more content
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        event more content
    </div>
</div>
    
    <hr />
        <footer>
            <p>&copy; Some Application</p>
        </footer>
    </div>

</body>

score -1 · Answer 5 · answered Aug 24 '16 at 17:37

-1

Add overflow-x to your class description. This will add a scroll bar when needed

    overflow-x:auto;

answered Aug 24 '16 at 17:37

Claus

532
2
8
20

OP is not looking to add a scroll bar. This is a problem involving the correct positioning of elements. – Ricky Ruiz Aug 24 '16 at 17:40
@Ricardo Ruiz, OP stand for? I saw many users are using this word on stackoverflow. I'm new here. – Khurram Aug 24 '16 at 17:45
@Claus It's a slang commonly used in boards/forums, short for Original Poster. – Ricky Ruiz Aug 24 '16 at 17:50
did not ask for definition of OP – Claus Aug 24 '16 at 18:36

Fixed div with 100% width in body-content

5 Answers5