有与我的回答类似的问题，但我找不到任何适合我的问题，基本上我将 body 宽度设置为 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>最佳答案
不要为 <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 的最小高度设置为该值。页脚将始终位于页面底部。
关于html - 如何忽略最大主体宽度以允许某些 div 扩展到该宽度之外？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46070431/