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

Я пытаюсь дать div (position: fixed) ширину 100% (относящуюся к ней parent div). Но у меня есть некоторые проблемы...

EDIT: Первая проблема связана с использованием наследования, но она по-прежнему не работает. Я думаю, что проблема в том, что я использую несколько 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/

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

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

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

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

ОТВЕТЫ

Ответ 1

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

Возможно, вы захотите посмотреть в javascript-решение для браузеров, которое вам нужно поддерживать, и которые не поддерживают width:inherit

Ответ 2

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

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

Но, я думаю, почти так же часто адаптивный дизайн также устанавливает max-width:

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

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

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

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

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

Ответ 3

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

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

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

Элемент #fixed наследует его родительскую ширину, поэтому он будет на 100% от этого.

Ответ 4

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

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

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

Ответ 5

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

Ответ 6

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

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

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

-webkit-transform: translateZ(0);

Ответ 7

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

Например, у меня был этот HTML:

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

и сделать #fx фиксированным внутри .head, поэтому обходной путь - добавить дополнительный div в качестве контейнера для #fx с position: absolute, например:

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

Ответ 8

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

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

Ответ 9

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

Я использовал фиксированную позицию для родительского div и максимальную ширину для содержимого.

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

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

Ответ 10

Это решение соответствует следующим критериям

  1. Процентная ширина разрешена на родительском
  2. Работает после изменения размера окна
  3. Контент под заголовком никогда не будет недоступен

Насколько я знаю, этот критерий не может быть соблюден без Javascript (к сожалению).

Это решение использует jQuery, но также может быть легко преобразовано в vanilla JS:

function fixedHeader(){
  $(this).width($("#wrapper").width());
  $("#header-filler").height($("#header-fixed").outerHeight());
}

$(window).resize(function() {
  fixedHeader();
});

fixedHeader();
#header-fixed{
  position: fixed;
  background-color: white;
  top: 0;
}
#header-filler{
  width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<div id="header-fixed">
  This is a nifty header! works even when resizing the window causing a line break
</div>
<div id="header-filler"></div>

[start fluff]<br>
a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
[end fluff]

</div>

Ответ 11

фиксированная позиция немного хитрая (на самом деле невозможная), но позиция: липкая прекрасно делает свое дело:

<div class='container'>
  <header>This is the header</header>
  <section>
    ... long lorem ipsum
  </section>
</div>



body {
  text-align: center;  
}

.container {
  text-align: left;
  max-width: 30%;
  margin: 0 auto;
}


header {
  line-height: 2rem;
  outline: 1px solid red;
  background: #fff;
  padding: 1rem;

  position: sticky;
  top: 0;
}

посмотрите пример кода