Установить ширину div «Position: fixed» относительно родительского div

Я пытаюсь дать div (position: fixed) ширину 100% (относительно его родительского div). Но у меня есть некоторые проблемы ...

РЕДАКТИРОВАТЬ: Первая проблема решается с помощью наследования, но он по-прежнему не работает. Я думаю, что проблема в том, что я использую несколько div, которые принимают ширину 100% / наследовать. Вы можете найти вторую проблему в обновлении jsfiddle: http://jsfiddle.net/4bGqF/7/

Пример Фокса

#container {
    width: 800px;
}

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

и HTML

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

Или вы можете попробовать это: http://jsfiddle.net/4bGqF/

Проблемы, похоже, заключаются в том, что фиксированный элемент всегда принимает ширину окна / документа . Кто-нибудь знает, как это исправить?

Я не могу дать свой фиксированный элемент с фиксированным, потому что я использую плагин jScrollPane. Это зависит от содержимого, есть ли полоса прокрутки или нет.

Большое спасибо!

PS: текст 2 деления находятся друг на друге. Это всего лишь пример, так что это не имеет значения.

Я не уверен в том, что вторая проблема (на основе вашего редактирования), но если вы примените width:inheritко всем внутренним div, это работает: http://jsfiddle.net/4bGqF/9/

Возможно, вы захотите найти решение javascript для браузеров, которые вам нужно поддерживать и которые не поддерживают width:inherit

Как прокомментировали многие, адаптивный дизайн очень часто устанавливает ширину на%

width:inheritбудет наследовать ширину CSS, а не вычисленную ширину - что означает, что дочерний контейнер наследуетwidth:100%

Но, думаю, почти так же часто реагируют дизайнерские наборы max-width, поэтому:

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

Это сработало очень удовлетворительно, чтобы решить мою проблему, состоящую в том, чтобы ограничить липкое меню исходной родительской шириной всякий раз, когда оно застревало.

И родитель, и потомок будут придерживаться, width:100%если область просмотра меньше максимальной ширины. Кроме того, оба будут придерживаться, max-width:800pxкогда область просмотра шире.

Он работает с моей уже адаптивной темой таким образом, что я могу изменить родительский контейнер без необходимости также изменять фиксированный дочерний элемент - элегантный и гибкий

PS: лично я думаю, что это не имеет значения, что IE6 / 7 не используют inherit

фиксированная позиция немного хитрая (на самом деле невозможная), но позиция: липкая прекрасно справляется с задачей:

<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;
}

посмотрите пример кода

Вы также можете решить это с помощью jQuery:

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

Это было очень полезно для меня, потому что мой макет был адаптивным, и inheritрешение не работало со мной!

Используйте этот CSS:

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

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

Элемент #fixed унаследует свою родительскую ширину, поэтому он будет составлять 100% от нее.

Фиксированное позиционирование должно определять все относительно области просмотра, поэтому position:fixedвсегда будет делать это. position:relativeВместо этого попробуйте использовать дочерний div. (Я понимаю, что вам может понадобиться фиксированное позиционирование по другим причинам, но если это так - вы не можете добиться соответствия ширины родительскому без JS inherit)

Вот небольшой прием, с которым мы столкнулись при исправлении некоторых проблем с перерисовкой в ​​большом приложении.

Используйте -webkit-transform: translateZ(0);на родителях. Конечно, это характерно для Chrome.

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

-webkit-transform: translateZ(0);

Для этого есть простое решение.

Я использовал фиксированную позицию для родительского div и максимальную ширину для содержимого.

Вам не нужно слишком много думать о других контейнерах, потому что фиксированная позиция только относительно окна браузера.

       .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>

Это решение соответствует следующим критериям

1. Допускается процентная ширина родительской
2. Работает после изменения размера окна
3. Контент под заголовком никогда не будет недоступен

Насколько мне известно, без Javascript этот критерий выполнить невозможно (к сожалению).

В этом решении используется jQuery, но его также можно легко преобразовать в ванильный 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>

Вам нужно указать тот же стиль фиксированного элемента и его родительского элемента. Один из этих примеров создан с максимальной шириной, а в другом - с отступами.

* {
  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>