Установите ширину разделителя «Позиция: фиксированный» относительно родительского div

Question

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

EDIT: Первая проблема связана с использованием inherit, но она по-прежнему не работает. Я думаю, что проблема в том, что я использую несколько div, которые принимают ширину 100%/inherit. Вы можете найти вторую проблему на jsfiddle обновление: http://jsfiddle.net/4bGqF/7/

Fox например

#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/

проблема заключается в том, что фиксированный элемент всегда принимает ширину o f окно/документ. Кто-нибудь знает, как это исправить?

Я не могу дать фиксированный элемент фиксированным, потому что я использую плагин jScrollPane. Это зависит от того, есть ли полоса прокрутки или нет.

Большое спасибо!

PS: Текст двух разделов находится друг на друге. Это просто пример, который не имеет большого значения.

Answer 1

Я не уверен, что вторая проблема есть (на основе вашего редактирования), но если применить width:inherit ко всем внутренним дивам, она работает: http://jsfiddle.net/4bGqF/9/

вы можете посмотреть в яваскрипт решения для браузеров, которые вам нужны для поддержки и этой поддержку don't width:inherit

Answer 2

Используйте этот CSS:

#container { 
    width: 400px; 
    border: 1px solid red; 
} 

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

#FIXED элемент будет наследовать его родителей ширина, так что это будет 100% от этого.

Answer 3

Исправленное позиционирование должно определять все по отношению к окну просмотра, поэтому position:fixed всегда будет делать это. Вместо этого попробуйте использовать position:relative на дочернем div. (Я понимаю, что вам может понадобиться фиксированное позиционирование по другим причинам, но если это так, вы не можете сделать так, чтобы ширина соответствовала его родительской стороне без JS без inherit)

Answer 4

Вот трюк, который я использовал.

E.g. У меня был этот HTML:

<div class="head"> 
    <div id="fx">123</div> 
</div> 

и сделать #fx закреплен внутри.голова, так что обходной путь, чтобы добавить дополнительный DIV в качестве контейнера для #fx с позиции: абсолютный, как это:

<div class="head"> 
    <div class="area_for_fix"> 
     <div id="fx">123</div> 
    </div> 
</div> 

Вот CSS:

.head{ 
     min-width:960px; 
     width:960px; 
     nax-width:1400px; 
     height:300px; 
     border: 1px solid #000; 
     **position:relative;** 
     margin:0 auto; 
     margin-top:50px; 
     padding:20px; 
     text-align:right; 
     height:1500px; 
    } 

    .area_for_fix{ 

     **position:absolute;** 
     right:0; 
     width:150px; 
     height:200px; 
     background-color:red; 
    } 


    #fx{ 
     width:150px; 
     height:75px; 
     background-color:#ccc; 
     **position:fixed;** 
    } 

Важно: не установлен top и left для #fx, установите эти атрибуты на .area_for_fix.

Answer 5

Вы также можете решить с помощью JQuery:

var new_width = $('#container').width(); 
$('#fixed').width(new_width); 

Это было так полезно для меня, потому что мой макет был отзывчив и inherit решение не работает со мной!

Answer 6

Вот небольшой взлом, с которым мы столкнулись, исправляя некоторые проблемы с перерисованием в большом приложении.

Используйте -webkit-transform: translateZ(0); на родительском. Конечно, это характерно для Chrome.

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

-webkit-transform: translateZ(0); 

Answer 7

Обратите внимание, что position:fixed, кажется, не играть хорошо с right и left. Если исходный css вашего элемента - position:absolute; right:0;, и вы измените позицию на фиксированную с помощью скрипта, вы также должны установить right:auto и поместить свой элемент по-другому, если хотите, чтобы он оставался внутри ширины содержащего элемента.

Я понимаю, что это прямо не затрагивает скрипту в исходном вопросе, но, надеюсь, полезно, чтобы кто-то устранил ту же самую основную проблему.

Answer 8

Как и многие люди отмечают, адаптивный дизайн очень часто устанавливает ширину%

width:inherit наследует ширину CSS не является вычисляется ширина - Это означает, что ребенок наследует контейнер width:100%

Но , Я думаю, почти так же быстро реагирующие дизайнерские наборы max-width тоже, поэтому:

#container { 
    width:100%; 
    max-width:940px; 
} 
#contained { 
    position:fixed; 
    width:inherit; 
    max-width:inherit; 
} 

Это работало очень удовольствию, чтобы решить мою проблему создания липкий меню будет сдержанной к исходной родительской ширине всякий раз, когда он получил «застрял»

Как родитель и ребенок будет придерживаться width:100%, если окно просмотра меньше максимума ширина. Аналогично, оба будут придерживаться max-width:940px, когда область просмотра более широкая.

Он работает с моей уже отзывчивой темой таким образом, что я могу изменить родительский контейнер без необходимости также изменить фиксированный дочерний элемент - элегантный и гибкий

пса: Я лично думаю, что это не имеет значения, один бит что IE6/7 не используют inherit

Answer 9

Для этого есть простое решение.

Я использовал фиксированное положение для родительского div и max-width для содержимого.

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

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