it-roy-ru.com

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

Я пытаюсь дать 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/

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

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

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

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

99
Dnns

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

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

97
jeroen

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

width:inherit будет наследовать CSS width, а не computed width - что означает, что дочерний контейнер наследует 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

17
aequalsb

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

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

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

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

12
banrobert

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

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

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

10
user3173364

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

6
Thomas Shields

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

Например. У меня был этот 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.

1
Evgeniy

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

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

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

-webkit-transform: translateZ(0);
1
Senica Gonzalez

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

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

см. образец кода

0
Multicam

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

  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>

0
Skeets

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

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

0
Sab Devadasan