固定 div 从父级获取宽度为 100%答案

【问题标题】：Fixed div get width from parent in 100%固定 div 从父级获取宽度为 100%
【发布时间】：2016-06-15 11:19:22
【问题描述】：

我尝试将 100% 的父级分配给固定 div，但占用了 100% 的屏幕。

我在这里准备了代码 http://codepen.io/rodboc/pen/ZOOEWp

HTML

<div id="wrapper">
  <div class="box">
    <div class="header">
      <p>Header</p>
    </div>
    <div class="content">
      <p>Content here Lorem Ipsum</p>
      <p>Content here Lorem Ipsum</p>
      <p>Content here Lorem Ipsum</p>
      <p>Content here Lorem Ipsum</p>
      <p>Content here Lorem Ipsum</p>
      <p>Content here Lorem Ipsum</p>
      <p>Content here Lorem Ipsum</p>
      <p>Content here Lorem Ipsum</p>
      <p>Content here Lorem Ipsum</p>
      <p>Content here Lorem Ipsum</p>
      <p>Content here Lorem Ipsum</p>
      <p>Content here Lorem Ipsum</p>
      <p>Content here Lorem Ipsum</p>
      <p>Content here Lorem Ipsum</p>
      <p>Content here Lorem Ipsum</p>
      <p>Content here Lorem Ipsum</p>
      <p>Content here Lorem Ipsum</p>
      <p>Content here Lorem Ipsum</p>
    </div>
  </div>
</div>

CSS

#wrapper {
  width: calc(100% / 3);
  height: 900px;
  background: #ecf0f1;
  margin: 0 auto;
  padding: 10px;
}
#wrapper .box {
  width: 100%;
}
#wrapper .header {
  width: inherit;
  position: fixed;
  background: #2ecc71;
}
#wrapper .content {
  width: inherit;
  background: #27ae60;
}

如果在 px 中定义父级的宽度有效，但我不能这样做，则应为 100%

【问题讨论】：

stackoverflow.com/questions/21309975/…的可能重复
@MarcoValente 谢谢，但你提到的问题是固定宽度，在这种情况下是 %
@rodboc，兄弟，看看我的回答，你可能会喜欢它
它是继承它上面容器的宽度，也就是100%；这是您的包装器将 .box 推得更小。你把你的 div 顺序搞混了。使用基本网格可以解决所有这些问题。 Google Kindle 网格。

标签： html css

【解决方案1】：

其实很简单，把header移到box div之外。

body, html {
  margin: 0;
  width: 100%
}
#wrapper {
  width: calc(100% / 3);
  height: 900px;
  background: #ecf0f1;
  margin: 0 auto;
  padding: 10px;
}
#wrapper .box {
  background: lime;
}
#wrapper .header {
  width: inherit;
  position: fixed;
  background: #2ecc71;
}
#wrapper .content {
  background: #27ae60;
}

<div id="wrapper">
  <div class="header">
    <p>Header</p>
  </div>
  <div class="box">
    <div class="content">
      <p>Content here Lorem Ipsum</p>
      <p>Content here Lorem Ipsum</p>
      <p>Content here Lorem Ipsum</p>
      <p>Content here Lorem Ipsum</p>
      <p>Content here Lorem Ipsum</p>
      <p>Content here Lorem Ipsum</p>
      <p>Content here Lorem Ipsum</p>
      <p>Content here Lorem Ipsum</p>
      <p>Content here Lorem Ipsum</p>
      <p>Content here Lorem Ipsum</p>
      <p>Content here Lorem Ipsum</p>
      <p>Content here Lorem Ipsum</p>
      <p>Content here Lorem Ipsum</p>
      <p>Content here Lorem Ipsum</p>
      <p>Content here Lorem Ipsum</p>
      <p>Content here Lorem Ipsum</p>
      <p>Content here Lorem Ipsum</p>
      <p>Content here Lorem Ipsum</p>
    </div>
  </div>
</div>

【讨论】：

由于宽度错误而无法正常工作，并且在某些情况下会在右侧添加额外的填充或边距
我第一次设法让它看起来像它应该的那样，现在正如你写给我的那样，我看到了这个问题。可能我错过了什么。会再看的。
尝试添加 display: flex;到包装器。告诉我现在还好吗
但是没有必要使用flex，宽度没有错，看起来有点不同，因为你在盒子上有margin: 10px，所以如果你添加margin: 10px;到标题，它看起来就像你想要的那样
删除了我的答案并稍微更新了你的+1 ...请尽可能使用 Stack sn-ps，它使答案更加完整且独立于外部资源

【解决方案2】：

body, html {
  width: 100%
}
#wrapper {
  width: calc(100% / 3);
  height: 900px;
  background: #ecf0f1;
  margin: 0 auto;
}
#wrapper .box {
  width: 100%;
  max-width: 238px;
  margin: 10px;
  background: lime;
}
#wrapper .header {
  width: 100%;
  position: fixed;
  background: #2ecc71;
  max-width: inherit;
}
#wrapper .content {
  width: 100%;
  background: #27ae60;
}

<div id="wrapper">
  <div class="box">
    <div class="header">
      <p>Header</p>
    </div>
    <div class="content">
      <p>Content here Lorem Ipsum</p>
      <p>Content here Lorem Ipsum</p>
      <p>Content here Lorem Ipsum</p>
      <p>Content here Lorem Ipsum</p>
      <p>Content here Lorem Ipsum</p>
      <p>Content here Lorem Ipsum</p>
      <p>Content here Lorem Ipsum</p>
      <p>Content here Lorem Ipsum</p>
      <p>Content here Lorem Ipsum</p>
      <p>Content here Lorem Ipsum</p>
      <p>Content here Lorem Ipsum</p>
      <p>Content here Lorem Ipsum</p>
      <p>Content here Lorem Ipsum</p>
      <p>Content here Lorem Ipsum</p>
      <p>Content here Lorem Ipsum</p>
      <p>Content here Lorem Ipsum</p>
      <p>Content here Lorem Ipsum</p>
      <p>Content here Lorem Ipsum</p>
    </div>
  </div>
</div>

固定位置元素不再与其父元素相关。

根据文档： position:fixed MDN

固定不要为元素留出空间。相反，将其放置在相对于屏幕视口的指定位置并且不移动它滚动时。打印时，将其放置在固定位置每一页。此值始终会创建一个新的堆叠上下文。

解决此问题的一种方法是设置父级的最大宽度并让子级继承它。因此，在您的情况下，附加的 sn-p 上应该是相同的。

【讨论】：

这是他做事的顺序，而不是固定的div不能包含的事实。 jsfiddle.net/C93mk/2141

【解决方案3】：

这可能会解决您的问题，更改标题类的样式，如下所示：

#wrapper .header {
  width: 100%;
  position: fixed;
  background: #2ecc71;
  max-width:calc(100% / 3);
}

看看它是否适合你：

http://output.jsbin.com/jaxasikose/

【讨论】：

但是我的朋友，在这种情况下不接受边距或填充
它确实接受内部
元素的边距和填充，但您仍然可以对内容进行文本对齐

【解决方案4】：

好的，这就是你如何用干净的代码来修复它：

#wrapper {
  width: calc(100% / 3);
  height: 900px;
  background: #ecf0f1;
  margin: 0 auto;
  padding: 10px;
}

#wrapper .box {
  width: 100%;
  position: relative;
}

#wrapper .header {
  width: 100%;
  position: absolute;
  background: #2ecc71;
}

#wrapper .content {
  width: 100%;
  overflow: auto;
  background: #27ae60;
}

【讨论】：

我认为 OP 试图实现的是将标题固定在页面顶部。
@MeilyChhon 我的回答也被否决了，但输出是正确的
@rodboc，这不是你想要的吗？哈哈
绝对位置和固定位置不是一回事。 Absolute 会将页眉粘贴到页面顶部并随页面滚动，fixed 将在滚动时保持在相同的屏幕位置。