固定div从父级获取宽度100％

Question

我试图将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％

Answer 1

实际上非常简单，将标题移到方框div之外。

// create a special deleter that calls the correct function
// to delete the object
struct SDL_Surface_deleter
{
    void operator()(SDL_Surface* surface) const { SDL_FreeSurface(surface); }
};

// some type aliases for convenience
using SDL_Surface_uptr = std::unique_ptr<SDL_Surface, SDL_Surface_deleter>;
using SDL_Surface_sptr = std::shared_ptr<SDL_Surface>;

SDL_Surface_uptr make_unique_surface(SDL_Surface* surface)
{
    return SDL_Surface_uptr{surface};
}

SDL_Surface_sptr make_shared_surface(SDL_Surface* surface)
{
    return {surface, SDL_Surface_deleter{}};
}

void smart_objects()
{
    // no need to delete this
    auto unique_surface = make_unique_surface(SDL_LoadBMP("asdf.bmp"));

    // no need to delete this either
    auto shared_surface = make_shared_surface(SDL_LoadBMP("asdf.bmp"));

    // stuff...
}

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

Answer 2

<table>
  <thead>
    <tr>
      <th>abcd</th>
      <% if !session[:user].nil? %>
      <th>def</th>
      <% end %>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>123</td>
      <% if !session[:user].nil? %>
      <td>456</td>
      <% end %>
    </tr>
  </tbody>
</table>

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

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

基于文档： position:fixed MDN

  

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

解决这个问题的一种方法是使用父级的最大宽度，让子级继承它。 所以在你的情况下，我附上的片段应该是相同的。

Answer 3

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

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

检查它是否适合你：

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

Answer 4

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

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