Встановити ширину поділу "Положення: фіксований" щодо батьківського діла

Я намагаюся надати div (позиція: фіксований) шириною 100% (стосується його батьківського діва). Але у мене є деякі проблеми ...

EDIT: Перша проблема вирішується за допомогою спадкування, але вона все ще не працює. Я думаю, що проблема полягає в тому, що я використовую кілька дівок, які приймають ширину 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: Текст двох дівок знаходиться один на одного. Це лише приклад, який насправді не має значення.

Я не впевнений, що це за друга проблема (виходячи з вашої редакції), але якщо ви застосовуєтесь width:inheritдо всіх внутрішніх даних, це працює: 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дочірнім дівом. (Я усвідомлюю, що вам може знадобитися фіксоване позиціонування з інших причин, але якщо так - ви не можете реально зрівняти ширину, з якою він відповідає батькові, без JS inherit)

Ось невеликий злом, який ми зіткнулися, виправляючи деякі проблеми з перемальовуванням у великому додатку.

Використовувати -webkit-transform: translateZ(0);на батьківському. Звичайно, це характерно для Chrome.

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

-webkit-transform: translateZ(0);

Для цього є просте рішення.

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

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

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