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

Question

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

РЕДАКТИРОВАТЬ: Первая проблема решается с помощью наследования, но он все еще не работает.Я думаю, что проблема в том, что я использую несколько Div, которые принимают 100% / наследовать ширину.Вы можете найти вторую проблему в обновлении 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: Текст из двух элементов div находится друг над другом.Это всего лишь пример, так что это не имеет значения.

Answer 1

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

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

Answer 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

Answer 3

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

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

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

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

Answer 4

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

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

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

Answer 5

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

Answer 6

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

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

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

-webkit-transform: translateZ(0);

Answer 7

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

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

см. Пример кода

Answer 8

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

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

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

и чтобы сделать #fx фиксированным внутри .head, поэтому обходной путь должен быть добавлендополнительный 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 9

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

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>

Answer 10

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

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