如何忽略最大身體寬度以允許某些div在該寬度之外展開？

我的答案也有類似的問題，但我找不到任何適合我的問題的東西，基本上我將身體寬度設置爲960px，因爲它的標準必須符合當時的情況，但是有些東西我想要忽略通過該頁眉/頁腳的寬度和一些只包含背景顏色的div來指示內容頁面的某個區域。如何忽略最大身體寬度以允許某些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>

來源

2017-09-06 Luke

不要爲<body>標籤設置固定寬度。這只是等待發生的麻煩。

我想我明白你的設計。這裏是什麼，我會做一個基本的實體模型：

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

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

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

你會注意到，我加入jQuery和一個小腳本。如果內容太短，這就是頁腳底部的原因。這是你想通過頁腳實現的嗎？

它計算頁眉高度和頁腳高度，並從文檔高度中減去它們，然後將＃main-content的最小高度設置爲該值。頁腳將始終位於頁面的底部。

來源

2017-09-06 09:03:37

謝謝，這正是我一直在尋找:)我會給它一個鏡頭 – Luke

最受歡迎@ user8532351 –

請問是否有關於此的教程？你從別的地方得到它了嗎？因爲我想閱讀它:) – Luke

答案將取決於如果你只想與頁眉和頁腳辦呢？但無論哪種方式解決方案將解決這一問題：刪除身體上的寬度，並將其添加到<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;？

來源

2017-09-06 08:50:04

要回答你的問題，我正在關注這篇文章。 https：//開頭pixelsvsbytes。com/2011/09/sticky-css-footers-the-flexible-way/ – Luke

另外它不僅僅是我想要忽略的主div的頁眉和頁腳，還會有「主要內容」中的div想忽略主要的div寬度 – Luke

您還可以爲頁眉和頁腳添加負邊距（從我們使用@media查詢跨越960px大小的那一刻起）。無論如何，我認爲寬度100％最多可達960px，所以你也必須調整。

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

我認爲這是解決問題的錯誤方法。但它確實有效（並且具有非常好的應用程序）。

Dejan.S的方法更好：不是限制寬度中的所有內容，而是嘗試用某個元素來取消 - >僅限制需要限制的元素。

來源

2017-09-06 09:06:56

如何忽略最大身體寬度以允許某些div在該寬度之外展開？

回答

相關問題