Установите ширину разделителя "Позиция: фиксированный" относительно родительского 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
Это решение соответствует следующим критериям
- Процентная ширина разрешена на родительском
- Работает после изменения размера окна
- Контент под заголовком никогда не будет недоступен
Насколько я знаю, этот критерий не может быть соблюден без 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;
}
посмотрите пример кода