Question

我的答案也有类似的问题，但我找不到任何适用于我的问题，基本上我将车身宽度设置为960px，因为它的标准必须是时间，但是我觉得有些事情我想成为这个页眉/页脚宽度和一些只包含背景颜色的div表示忽略了内容页面的某些区域。

修改应该允许任何其他div忽略主体宽度，而不仅仅是页脚/标题。

我不能使用绝对位置，因为我不想将它用于我的页脚，因为它将在未来弄乱页脚位置。

html,
body {
  background-color: white;
  margin: 0 auto;
  width: 960px;
  height: 100%;
}

.Frame {
  display: table;
  height: 100%;
  width: 100%;
}

.Row {
  display: table-row;
  height: 1px;
}

.Row.Expand {
  height: auto;
}

.Row.footer {
  height: 30px;
  background-color: gray;
  margin-bottom: 0;
  width: 100%;
}

<body class="Frame">


  <header class="Row">
    /*header should ignore body width*/
  </header>
  <section class="Row Expand">
    /*some div should ignore the body width*/
  </section>
  <footer class="Row footer">
    /*footer should ignore body width/*
    <h3>Sticky footer</h3>
  </footer>

</body>

Answer 1

答案取决于您是否只想使用页眉和页脚？但无论哪种方式，解决方案都会解决此问题：移除正文上的宽度并将其添加到<div class="main-content"></div>或<main class="main-content"></main>下面的示例中。

    <body>
      <header></header>
      <main class="main-content">
        <section></section>
        <section></section>
        <section></section>
        <section></section>
      </main>
      <footer></footer>

</body>

.main-content {
  width: 960px;
}

看着你的CSS有很多问题。为什么要将body设置为display: table;？

Answer 2

不要为<body>标记设置固定宽度。它等待发生的麻烦。

我想我理解你想要的设计。这是我要做的基本模型：

＆＃13;

$('#main-content').css("min-height", $(window).height() - $("#footer").height() - $("#header").height() + "px");

＆＃13;

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  max-width: 100vw;
}

#header,
#footer,
#content-wapper,
section,
img {
  max-width: 100%;
  margin: 0 auto;
}

section.image,
img {
  font-size: 0;
  display: block
}

#header,
#footer {
  background: #333;
  height: 40px;
  color: white;
}

#main-content {
  background: #999;
}

.small {
  width: 800px;
  max-width: 100%;
  margin: 0 auto;
  padding: 2vw;
  background: #131418;
}

section p {
  color: white;
  line-height: 1.25
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>

  <div id="content-wrapper">

    <header id="header">
      /*header should ignore body width*/
    </header>

    <div id="main-content">
      <section class="small">
        <p>Lorem ipsum dolor sit amet, id sea tale ubique legere, ex elit veri iudicabit eos. Vix at dicat pertinax, nibh libris nemore in mei, vis novum evertitur eu. Vim atqui ullum verterem ei, vocibus efficiantur te vim, elitr cetero adversarium an sit.
          Eu eam commune prodesset persequeris. Ex mel quod incorrupte. Cu choro congue dignissim usu. Vix no iisque patrioque, novum fierent singulis qui cu. Odio dolore altera mei ei, ex nam nonumy mollis. In vis invidunt senserit accommodare, vim persius
          aliquid instructior et. Ex quo appareat assentior, ornatus graecis minimum te usu.</p>
      </section>
      <section class="image">
        <img src="https://unsplash.it/1350/600" alt="">
      </section>
      <section class="small">
        <p>Lorem ipsum dolor sit amet, id sea tale ubique legere, ex elit veri iudicabit eos. Vix at dicat pertinax, nibh libris nemore in mei, vis novum evertitur eu. Vim atqui ullum verterem ei, vocibus efficiantur te vim, elitr cetero adversarium an sit.
          Eu eam commune prodesset persequeris. Ex mel quod incorrupte. Cu choro congue dignissim usu. Vix no iisque patrioque, novum fierent singulis qui cu. Odio dolore altera mei ei, ex nam nonumy mollis. In vis invidunt senserit accommodare, vim persius
          aliquid instructior et. Ex quo appareat assentior, ornatus graecis minimum te usu.</p>
      </section>
      <section class="image">
        <img src="https://unsplash.it/1500/600" alt="">
      </section>
      <section class="small">
        <p>Lorem ipsum dolor sit amet, id sea tale ubique legere, ex elit veri iudicabit eos. Vix at dicat pertinax, nibh libris nemore in mei, vis novum evertitur eu. Vim atqui ullum verterem ei, vocibus efficiantur te vim, elitr cetero adversarium an sit.
          Eu eam commune prodesset persequeris. Ex mel quod incorrupte. Cu choro congue dignissim usu. Vix no iisque patrioque, novum fierent singulis qui cu. Odio dolore altera mei ei, ex nam nonumy mollis. In vis invidunt senserit accommodare, vim persius
          aliquid instructior et. Ex quo appareat assentior, ornatus graecis minimum te usu.</p>
      </section>
      <section class="image">
        <img src="https://unsplash.it/800/600" alt="">
      </section>
      <section class="small">
        <p>Lorem ipsum dolor sit amet, id sea tale ubique legere, ex elit veri iudicabit eos. Vix at dicat pertinax, nibh libris nemore in mei, vis novum evertitur eu. Vim atqui ullum verterem ei, vocibus efficiantur te vim, elitr cetero adversarium an sit.
          Eu eam commune prodesset persequeris. Ex mel quod incorrupte. Cu choro congue dignissim usu. Vix no iisque patrioque, novum fierent singulis qui cu. Odio dolore altera mei ei, ex nam nonumy mollis. In vis invidunt senserit accommodare, vim persius
          aliquid instructior et. Ex quo appareat assentior, ornatus graecis minimum te usu.</p>
      </section>
      <section class="image">
        <img src="https://unsplash.it/800/800" alt="">
      </section>
      <section class="small">
        <p>Lorem ipsum dolor sit amet, id sea tale ubique legere, ex elit veri iudicabit eos. Vix at dicat pertinax, nibh libris nemore in mei, vis novum evertitur eu. Vim atqui ullum verterem ei, vocibus efficiantur te vim, elitr cetero adversarium an sit.
          Eu eam commune prodesset persequeris. Ex mel quod incorrupte. Cu choro congue dignissim usu. Vix no iisque patrioque, novum fierent singulis qui cu. Odio dolore altera mei ei, ex nam nonumy mollis. In vis invidunt senserit accommodare, vim persius
          aliquid instructior et. Ex quo appareat assentior, ornatus graecis minimum te usu.</p>
      </section>
      <section class="image">
        <img src="https://unsplash.it/1800/600" alt="">
      </section>
      <section class="small">
        <p>Lorem ipsum dolor sit amet, id sea tale ubique legere, ex elit veri iudicabit eos. Vix at dicat pertinax, nibh libris nemore in mei, vis novum evertitur eu. Vim atqui ullum verterem ei, vocibus efficiantur te vim, elitr cetero adversarium an sit.
          Eu eam commune prodesset persequeris. Ex mel quod incorrupte. Cu choro congue dignissim usu. Vix no iisque patrioque, novum fierent singulis qui cu. Odio dolore altera mei ei, ex nam nonumy mollis. In vis invidunt senserit accommodare, vim persius
          aliquid instructior et. Ex quo appareat assentior, ornatus graecis minimum te usu.</p>
      </section>
    </div>


    <footer id="footer">
      /*footer should ignore body width/*
      <h3>Sticky footer</h3>
    </footer>

  </div>
</body>

＆＃13;

你会注意到我添加了jQuery和一个小脚本。如果内容太短，这就是将页脚保留在页面底部的原因。这是你想要用页脚实现的吗？

它计算页眉的高度和页脚的高度，然后从文档的高度中减去它们，然后将#main-content的最小高度设置为该值。页脚将始终位于页面底部。

Answer 3

您还可以将页眉和页脚属性设置为负边距（从我们使用@media查询跨越960px大小的那一刻起）。我认为宽度100％最多将达到960px，所以你也必须调整它。

    @media (min-width: 960px) {
        footer, header {
            margin-left: calc( -(50vw-480px) );
            margin-right: calc( -(50vw-480px) );
            width: 100vw;
        }
    }

我认为这是解决问题的错误方法。但它确实有效（并且有非常好的应用程序）。

Dejan.S的方法更好：不是限制宽度中的所有内容，而是尝试用某个元素撤消它 - ＆gt;仅限制需要限制的元素。

如何忽略最大体宽以允许某些div扩展到该宽度之外？

3 个答案: