положение: фиксированное и ширина: наследование в процентах от родителя

я пытаюсь датьфиксированный элемент аwidth процентного родителя (здесь#container). Когда я использую пиксель вместо процента, то это работает. Как мне это сделать? Это возможно сCSS?

HTML


  
    
        Sitename
                   
  

CSS

#outer{
  width:300px;
  border: 1px solid yellow;   
}

#container {
  width: 90%; /*When I use e.g 250 px it works. But I need it in percentage*/
  border: 1px solid red;
  height: 300px;
}

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

JSFiddle

Добавлять:

я нуждаюсьposition:fixed, Потому что я хочу разместить его внизу страницы примерно так:

JSFiddle

Решение сposition:relativ Безразлично»я не работаю

 red_baron09 июн. 2013 г., 18:19
@Vucko: я думал, что смогу сделать это без JavaScript. А может и нет ?! Почему он работает с пикселем, а не с процентным значением?
 Vucko09 июн. 2013 г., 17:53
Почему бы не использоватьJavaScript, чтобы установить ширину?
 steveax10 февр. 2014 г., 06:14

Ответы на вопрос(4)

Кажется, что статическое значение (250px) может передаваться посредством обычного наследования. Принимая во внимание, что когда используется относительное значение (90%), фиксированный div уже выведен из потока, и теперь в отношении наследования он 'Родитель - это окно просмотра. Мне кажется, что тыпридется использовать старый добрый JS.

Но этому вопросу уже несколько месяцев, так что, вероятно, нетВ любом случае это не имеет значения.

 justisb26 авг. 2015 г., 20:20
Старые вопросы всегда имеют значение для StackOverflow - теперь это один из лучших результатов поиска для "Положение фиксированной ширины наследуется. "
 raina77ow25 февр. 2016 г., 18:30
Не здесь'Ничего особенного в том, как позиционируются: фиксированные элементы обрабатываются при наследовании свойств. Проблема и глубже, и проще.

У вас есть #outer как ширина: 300px, #container как 90% означает 270px, теперь вы задали width: наследовать и position: fixed, что неоднозначно для браузера, поэтому используйте position: fixed с width: x% для #fixed

 Mitesh Vora09 июн. 2013 г., 18:36
его 90% от 300px ..
 red_baron09 июн. 2013 г., 18:30
Мне нужна позиция: исправлена, потому что я хочу, чтобы она была зафиксирована внизу страницы. Как это:jsfiddle.net/NfA2Z/8 Как я могу получить 270px? Использовать JavaScript?

установить ширинуфиксированный" до 100%, и дайте это (пустьскажем) позиция: относительная вместо фиксированной.http://jsfiddle.net/J7yE4/

#fixed {
    position: relative;
    width: 100%;
    border: 1px solid green;
}
 dmestrovic09 июн. 2013 г., 18:32
Что ж. когда вы устанавливаете ширину наследовать - он делает именно это. ваш элемент наследует ширину родителя. в этом случае - наследуется 90%! (когда вы устанавливаете parent в 250px - он наследует 250px) проблема возникает с фиксированной позицией. потому что ширина теперь рассчитывается на основе ширины окна.
 red_baron09 июн. 2013 г., 18:14
Ваше решение нене работает в моем случае. Мне нужно исправить положение, потому что оно должно быть внизу страницы. Пожалуйста, взглянитеjsfiddle.net/NfA2Z/8
 red_baron09 июн. 2013 г., 18:48
Да я вижу. Я думал, что ширина исходит из 300 пикселей от #outer. Таким образом, решение в моем случае состоит в том, чтобы использовать JavaScript, чтобы получить ширину #container?
 dmestrovic09 июн. 2013 г., 18:52
ну, я думаю, что это будет самое простое решение здесь. ^^ (если не единственный) (в обычном случае - ширина исходит от родителя, но не с position: fixed! =), это фиксирует ее в окне. )

Там's убеждение, что унаследованные ценностив переводе» от относительных (таких как проценты) в абсолютные. Угадай, что? Это'S не так. Вот'Что MDN говорит об этом:

inherit CSS-значение заставляет элемент, для которого он указан, приниматьвычисленное значение свойства из его родительского элемента.

[...]

Вычисление, необходимое для достижения вычисленного значения свойства, обычно включает преобразованиеотносительные значения (такие как вem units или жеpercentages) чтобыабсолютные значения, Например, если элемент имеет указанные значенияfont-size: 16px а такжеpadding-top: 2emтогда вычисленное значение padding-top32px (удвоить размер шрифта).

Тем не менее, для некоторых свойств (тех, где проценты относятся к чему-то, что может потребоваться для макета, например,widthmargin-righttext-indent, а такжеtop), указанные в процентах значения превращаются в рассчитанные в процентах значения. [...] Эти относительные значения, которые остаются в вычисленном значении, становятся абсолютными, когдаиспользуемая стоимость определен.

Теперь пример. Позволять'скажем, у нас есть следующая структура:


  
    
  

... и следующий CSS:

#alpha { outline: 1px solid red; width: 420px; height: 100px; }
#bravo { outline: 1px solid green; width: 50%; height: inherit; margin: 0 auto; }
#charlie { outline: 1px solid navy; width: inherit; height: inherit; margin: 0 auto; }

... вы'увидим эту картинку:

... это значит, что пока#charlie элемент имеет ту же высоту, что и его#bravo родитель, его ширина составляет 50% от его родителя. Унаследовано было вычисленное значение:100px по высоте,50% для ширины.

Хотя эта функция может быть хорошей или плохой, в зависимости от ситуации, для нефиксированных элементов она, похоже, определенно вредит фиксированным. Как50% значение дляwidth свойство наследуется как есть,used value для этого измерения будет основан на области просмотра. Это'то же самое сpercentage-using значения, такие как.calc(50%)

Ваш ответ на вопрос