Установите фиксированный 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/

Ответы

Ответ 1

Вы можете использовать margin для контейнера .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

Ответ 2

Как насчет this?

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

С помощью jquery вы можете установить любую ширину:)

EDIT: Как указано в комментариях, использование JQuery только для этого эффекта бессмысленно и даже контрпродуктивно. Я сделал этот пример для людей, которые используют JQuery для других вещей на своих страницах, и подумайте над этим и для этой части. Приносим извинения за любые неудобства, вызванные моим ответом.

Ответ 3

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

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/

Ответ 4

В верхней части вашего последнего 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, который показывает рабочий код и лучше объясняет, как это работает.

Ответ 5

человек ваш контейнер составляет 40% от ширины родительского элемента

но когда вы используете позицию: фиксированная, ширина зависит от ширины окна просмотра (документа)...

думая, я понял, что ваш родительский элемент имеет 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/

Надеюсь, это поможет, считает

Ответ 6

Попробуйте добавить преобразование к родительскому (не нужно ничего делать, может быть нулевой перевод) и установите фиксированную ширину ребенка на 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>

Ответ 7

Удалите 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;

}