Question

我试图给div（位置：固定）宽度100％（与它的父div相关）。但是我遇到了一些问题...

编辑：第一个问题是通过使用继承来解决的，但它仍然不起作用。我认为问题在于我使用了多个占用100％/继承宽度的div。您可以在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：2个div的文本在彼此之上。这只是一个例子，所以这并不重要。

Answer 1

我不确定第二个问题是什么（基于您的修改），但如果您将width:inherit应用于所有内部div，则可行：http://jsfiddle.net/4bGqF/9/

您可能希望针对需要支持且不支持width:inherit

的浏览器查看javascript解决方案

Answer 2

许多人评论说，响应式设计通常会将宽度设置为％

width:inherit将继承 CSS宽度而非计算宽度 - 这意味着子容器会继承width:100%

但是，我认为，几乎同样频繁的响应式设计也设置max-width，因此：

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

这非常令人满意地解决了我的问题，即粘性菜单被限制在原始父级宽度时会出现问题＆＃34;卡住＆＃34;

如果视口小于最大宽度，则父级和子级都将遵循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始终会这样做。请尝试在子div上使用position:relative。（我意识到你可能出于其他原因需要固定定位，但如果是这样的话 - 你不能真正使宽度与没有inherit的JS的父级相匹配

Answer 6

在修复大型应用上的重绘问题时，我们遇到了一些小问题。

在父级上使用-webkit-transform: translateZ(0);。当然这是针对Chrome的。

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

-webkit-transform: translateZ(0);

Answer 7

这是我使用的技巧。

E.g。我有这个HTML：

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

并将#fx修复为.head，因此解决方法是添加一个额外的div作为#fx的容器，其位置为：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上设置这些属性。

Answer 8

有一个简单的解决方案。

我使用父div的固定位置和内容的max-width。

您不需要过多考虑其他容器，因为仅相对于浏览器窗口固定位置。

＆＃13;

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

＆＃13;

<div class="fixed">
  <div class="content">
     This is my content
  </div>
</div>

＆＃13;

Answer 9

此解决方案符合以下条件

父级上允许使用百分比宽度
调整窗口大小后工作
标题下的内容永远不可访问

据我所知，不幸的是，没有Java语言就无法满足此条件。

此解决方案使用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 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;
}

see the codepen sample

Answer 11

您需要提供与fixed元素及其父元素相同的样式。其中一个示例使用最大宽度创建，而另一个示例使用填充。

<form>
  <input ... name="something" [(ngModel)]="model.something"`>
</form>

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

Answer 12

对于带有 jquery 的粘性标题，我仍然是 jquery 的学习者，这些 css 设置有效。

header.sticky{
    position: fixed;
    border-radius: 0px;
    max-height: 70px;
    z-index: 1000;
    width: 100%;
    max-width: inherit;
}

header 位于最大宽度为 1024 的包装 div 内。

设置相对于父div的“Position：fixed”div的宽度

12 个答案: