Встановіть Fixed div на 100% ширину батьківського контейнера

У мене є обгортка з деяким заповненням, у мене тоді є плаваючий відносний div із процентною шириною (40%).

Всередині плаваючого відносного div у мене є фіксований div, який я хотів би мати такий же розмір, як його батьківський. Я розумію, що фіксований div вилучається із потоку документа і як такий ігнорує заповнення обгортки.

HTML

<div id="wrapper">
  <div id="wrap">
    Some relative item placed item
    <div id="fixed"></div>
  </div>
</div>

CSS

body { 
  height: 20000px 
}  
#wrapper {
  padding: 10%;
}  
#wrap { 
  float: left;
  position: relative;
  width: 40%; 
  background: #ccc; 
} 
#fixed { 
  position: fixed;
  width: inherit;
  padding: 0px;
  height: 10px;
  background-color: #333;
}

Ось обов’язкова скрипка: http://jsfiddle.net/C93mk/489/

Хтось знає про спосіб досягнення цього?

Я вніс зміни до скрипки, щоб показати більше деталей про те, що я намагаюся зробити, вибачте за плутанину: http://jsfiddle.net/EVYRE/4/

Ви можете використовувати поле для контейнера .wrap замість заповнення для .wrapper:

body{ height:20000px }
#wrapper { padding: 0%; }
#wrap{ 
    float: left;
    position: relative;
    margin: 10%;
    width: 40%; 
    background:#ccc; 
}
#fixed{ 
    position:fixed;
    width:inherit;
    padding:0px; 
    height:10px;
    background-color:#333;    
}

jsfiddle

Як щодо цього ?

$( document ).ready(function() {
    $('#fixed').width($('#wrap').width());
});

За допомогою jquery ви можете встановити будь-яку ширину :)

EDIT: Як зазначає dream у коментарях, використовувати JQuery саме для цього ефекту безглуздо і навіть контрпродуктивно. Я зробив цей приклад для людей, які використовують JQuery для інших матеріалів на своїх сторінках, і розглядають можливість використання його і для цієї частини. Перепрошую за незручності, спричинені моєю відповіддю.

Спробуйте додати перетворення до батьків (не потрібно нічого робити, це може бути нульовий переклад) і встановіть фіксовану ширину дитини на 100%

body{ height:20000px }
#wrapper {padding:10%;}
#wrap{ 
    float: left;
    position: relative;
    width: 40%; 
    background:#ccc; 
    transform: translate(0, 0);
}
#fixed{ 
    position:fixed;
    width:100%;
    padding:0px;
    height:10px;
    background-color:#333;
}

<div id="wrapper">
    <div id="wrap">
    Some relative item placed item
    <div id="fixed"></div>
    </div>
</div>

Ви можете використовувати абсолютне позиціонування, щоб закріпити нижній колонтитул до основи батьківського div. Я також додав 10px padding-bottom до обгортки (відповідати висоті нижнього колонтитула). Абсолютне позиціонування відносно батьківського div, а не за межами потоку, оскільки ви вже надали йому атрибут relational position.

body{ height:20000px }
#wrapper {padding:10%;}
#wrap{ 
    float: left;
    padding-bottom: 10px;
    position: relative;
    width: 40%; 
    background:#ccc; 
}
#fixed{ 
    position:absolute;
    width:100%;
    left: 0;
    bottom: 0;
    padding:0px;
    height:10px;
    background-color:#333;

}

http://jsfiddle.net/C93mk/497/

man ваш контейнер становить 40% ширини батьківського елемента

але коли ви використовуєте position: fixed, ширина базується на ширині області перегляду (документа) ...

Подумавши, я зрозумів, що ваш батьківський елемент має 10% відступів (лівий та правий), це означає, що ваш елемент має 80% загальної ширини сторінки. отже, ваш фіксований елемент повинен мати 40% на основі 80% загальної ширини

тому вам просто потрібно змінити клас #fixed на

#fixed{ 
    position:fixed;
    width: calc(80% * 0.4);
    height:10px;
    background-color:#333;
}

якщо ви використовуєте sass, postcss або інший компілятор css, ви можете використовувати змінні, щоб уникнути поломки макета, коли ви змінюєте значення доповнення батьківського елемента.

ось оновлена ​​скрипка http://jsfiddle.net/C93mk/2343/

Я сподіваюся, що це допоможе, привіт

Крім останнього jsfiddle , ви просто пропустили одне:

#sidebar_wrap {
  width:40%;
  height:200px;
  background:green;
  float:right;
}
#sidebar {
  width:inherit;
  margin-top:10px;
  background-color:limegreen;
  position:fixed;
  max-width: 240px; /*This is you missed*/
}

Але як це вирішить вашу проблему? Просто, давайте пояснимо, чому спочатку більше, ніж очікували.

Фіксований елемент #sidebarвикористовуватиме розмір ширини вікна як основу, щоб отримати власний розмір, як і будь-який інший фіксований елемент, як тільки цей елемент визначений width:inheritі #sidebar_wrapмає 40% як значення в ширині, тоді буде обчислювати window.width * 40%, тоді, якщо ширина вашого вікна більше, ніж ваша .containerширина, #sidebarбуде більше ніж #sidebar_wrap.

Таким чином, ви повинні встановити максимальну ширину #sidebar_wrap, щоб запобігти збільшенню #sidebar_wrap.

Перевірте цей jsfiddle, який показує робочий код, і краще поясніть, як це працює.

Видаліть Padding: 10%;або використовуйте px замість відсотків для.wrap

див. приклад: http://jsfiddle.net/C93mk/493/

HTML:

<div id="wrapper">
    <div id="wrap">
    Some relative item placed item
    <div id="fixed"></div>
    </div>
</div>

CSS:

body{ height:20000px }
#wrapper {padding:10%;}
#wrap{ 
    float: left;
    position: relative;
    width: 200px; 
    background:#ccc; 
}
#fixed{ 
    position:fixed;
    width:inherit;
    padding:0px;
    height:10px;
    background-color:#333;

}