Inheriting width from Bootstrap container when child is position fixed
Asked Answered
D

1

6

I am trying to have a header div inherit its width from its parent. The header div is position: fixed. The parent is contained inside a bootstrap container.

However, as you can see in the code I've created, it is not correctly inheriting the width of its parent - it is adding some extra width from somewhere.

This is all very annoying! Any idea how to fix this?

.category-body {
  margin-left: 17% !important;
  width: 67%;
  background-color: red;
  height: 500px;
}
.category-header {
  position: fixed;
  top: 51px;
  width: inherit;
  background-color: green;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="category-body">We are in the category-body
    <div class="category-header">We are in the category-header</div>
  </div>
</div>

http://plnkr.co/edit/yVk15RqDqAac4H2eDJQe

Disreputable answered 8/12, 2015 at 16:58 Comment(4)
Will the parent element always have a width of 67%?Stronghold
I understand what you mean, but your concept of inheritance is a bit off the mark. When you apply position: fixed to an element you remove it from the document flow. The element then has no parent, so there's nothing to inherit. More details hereSassafras
@Michael_B That's not entirely true. Even though the element is removed from the document flow, it still does inherit a width of 67%. It just doesn't work because the percentage is relative to the viewport and not the same container as the parent. The width is inherited. For instance, if the parent's width was 300px, it would work as expected. It just won't always work with percentage-based widths.Stronghold
@Josh Corzier not nescessarily - only for min-width: 1200px. For smaller screen sizes it has margin-left/right: 100px (min-width: 992) or an empty .category-body{} below thatFultz
S
3

The problem stems from using a percentage value on the parent width. Browsers seem to have a problem with this. (Tested on Chrome, FF & IE11.)

If you use pixel values the problem goes away.

Revise PLUNKR

From another answer:

It seems as though the static value (250px) can be propagated through normal inheritance. Whereas when the relative value (90%) is being used, the fixed div has already been taken out-of-flow, and now inheritance-wise, it's parent is the viewport.

Learn more here:

Sassafras answered 8/12, 2015 at 17:24 Comment(1)
So by the looks of it, the only non-pixel way to do this is using javascript?Fultz

© 2022 - 2024 — McMap. All rights reserved.