Установите фиксированный div на 100% ширину родительского контейнера

Question

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

390 7

html css

7 ответов:

Comments

Ничего не найдено.

YD1m · Accepted Answer · 2013-07-23 13:12:21

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

Hristo Valkanov · Accepted Answer · 2013-07-23 13:50:53

как о этой?
$( document ).ready(function() {
    $('#fixed').width($('#wrap').width());
});
С помощью jQuery вы можете установить любую ширину :)

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

MattP · Accepted Answer · 2013-07-23 14:15:14

вы можете использовать абсолютное позиционирование, чтобы прикрепить нижний колонтитул к основанию родительского div. Я также добавил 10px padding-bottom к обертке (соответствует высоте нижнего колонтитула). Абсолютное позиционирование относительно родительского div, а не вне потока, так как вы уже дали ему относительный атрибут 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/

Wojtek Kochanowski · Accepted Answer · 2017-12-12 17:09:33

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

Vagner · Accepted Answer · 2016-10-16 23:46:15

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

keep-faith · Accepted Answer · 2016-12-01 19:50:57

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

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

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

Так что вам просто нужно изменить свой # фиксированный класс на
#fixed{ 
    position:fixed;
    width: calc(80% * 0.4);
    height:10px;
    background-color:#333;
}
Если вы используете sass, postcss или другой компилятор css, вы можете использовать переменные, чтобы избежать нарушения макета при изменении значения заполнения родительского элемента.

вот обновленная скрипка http://jsfiddle.net/C93mk/2343/

надеюсь, это поможет, с уважением

Mohammad Masoudian · Accepted Answer · 2013-07-23 13:01:12

удалить 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;

}