Установить ширину div «Position: fixed» относительно родительского div

137

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

РЕДАКТИРОВАТЬ: Первая проблема решается с помощью наследования, но он по-прежнему не работает. Я думаю, что проблема в том, что я использую несколько div, которые принимают ширину 100% / наследовать. Вы можете найти вторую проблему в обновлении jsfiddle: http://jsfiddle.net/4bGqF/7/

Пример Фокса

#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: текст 2 деления находятся друг на друге. Это всего лишь пример, так что это не имеет значения.

DNNS
источник
см. мой ответ ниже, в котором содержится дополнительная информация о inheritтом, как использование max-width:inheritс width:inheritсохраняет соотношение контейнер /
содержимое

Ответы:

120

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

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

Йерун
источник
4
+1 за фантастически простое решение, хотя width: inheritэто не первое, о чем я бы подумал
Bojangles
7
Что это за колдовство?! +1
Нику Сурду
7
Любая идея, как решить эту проблему, если ширина #container составляет 50% внутри div с шириной = 100 пикселей (тогда ширина контейнера будет 50 пикселей, а фиксированная ширина будет 50% ширины браузера)?
Кек
113
Трюк с наследованием ширины родителя работает, только если родительский объект имеет заданную ширину в пикселях.
Джаху
33
Это довольно плохой ответ ... Это в основном эквивалент установки постоянных значений, что не очень полезно.
Джей
33

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

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

aequalsb
источник
Отличный ответ! В моем случае добавление min-width: inheritсделало трюк.
Бруно Монтейру
Это работает для родительских элементов с шириной, определенной как px и процент. Должен быть правильный ответ на мой взгляд.
Микель
24

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

<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;
}

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

Multicam
источник
11

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

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

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

Хакан Фистик
источник
1
плохой ответ, если вы измените размер окна, это сломается.
Джей
2
Должен действительно иметь обработчик события window.onresize.
twistedpixel
Это способ сделать. Можно обернуть в функцию setWidth (), а затем вызвать ее в слушателях событий окна «загрузка» и «изменение размера»
woodz
У меня это сработало! Я столкнулся с проблемой, когда у родителя была ширина: 25%, поэтому ширина: наследование сделало ширину каждого дочернего элемента: 25%.
Трой Ример,
10

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

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

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

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

banrobert
источник
1
кроме IE6-7 не поддерживает inherit. Не уверен, что это мат.
Томас Шилдс
Большое спасибо. Это работает, когда я пробую это в примере, но не в своем коде ... В любом случае это ответ на вопрос, который я здесь задал. Наверное, есть еще одна причина, почему не работает ... Но все же спасибо!
Dnns
6

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

Томас Шилдс
источник
1
@Downvoter - объясните, пожалуйста? У меня нет проблем с отрицательным голосом, но я хотел бы знать, почему, чтобы я мог улучшить свои ответы в будущем.
Томас Шилдс
1
Ваше объяснение в порядке, однако вы сказали: «Вы не можете добиться соответствия ширине родительскому без JS». Хотя в некоторых случаях это возможно (с помощью наследования).
Dnns
о Конечно. Я забыл о наследовании, поскольку я много нацелился на IE, и только IE9 + поддерживает его.
Томас Шилдс
1
даже Microsoft хочет, чтобы IE исчез - учитывая, сколько лет этому исходному посту, я думаю, что можно с уверенностью сказать, что проблема IE спорный. если настоятельно рекомендую не поддерживать IE, ЕСЛИ вы не выставляете счет специально за такую ​​поддержку - и почасово!
aequalsb
3

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

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

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

-webkit-transform: translateZ(0);
Сеница Гонсалес
источник
2
Это устраняет проблему ширины, но делает дочерний элемент нефиксированным относительно области просмотра.
Вивек Махарадж,
Приносим извинения за голос против, так как это полностью противоречит цели position: fixed.
trusktr
Не думаю, что вы читали вопрос. В нем говорится, как сделать div «относительно» родителя с «фиксированной» позицией. ЭТО ТАКЖЕ антификсированное положение. И в моем ответе четко написано «взломать». Он не побеждает цель, когда приближает вас к решению.
Senica Gonzalez
1

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

Я использовал фиксированную позицию для родительского 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>

Саб девадасан
источник
1

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

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

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

В этом решении используется jQuery, но его также можно легко преобразовать в ванильный 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>

Skeets
источник
0

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

* {
  box-sizing: border-box
}
body {
  margin: 0;
}
.container {
  max-width: 500px;
  height: 100px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  background-color: lightgray;
}
.content {
  max-width: 500px;
  width: 100%;
  position: fixed;
}
h2 {
  border: 1px dotted black;
  padding: 10px;
}
.container-2 {
  height: 100px;
  padding-left: 32px;
  padding-right: 32px;
  margin-top: 10px;
  background-color: lightgray;
}
.content-2 {
  width: 100%;
  position: fixed;
  left: 0;
  padding-left: 32px;
  padding-right: 32px;
}
<div class="container">
  <div class="content">
    <h2>container with max widths</h2>
  </div>
</div>

<div class="container-2">
  <div class="content-2">
    <div>
      <h2>container with paddings</h2>
    </div>
  </div>
</div>

Хачик
источник