我有一个两列布局(左侧栏和主要内容容器)，页面顶部有另一个栏。主容器的背景有垂直渐变。当我调整浏览器窗口大小时，它按预期工作。
如果有一个不可包裹的元素溢出视口(viewport)宽度，浏览器会显示水平滚动条。但是如果内容向右滚动，在页面主体的右侧，有未定义的 - 白色背景。
我试图简化布局并在 fiddle 中准备了 SSCCE 示例
body {
margin: 0;
height: 100vh;
width: 100vw;
padding: 0;
border: 0;
background: white;
font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
font-size: 0.85em;
overflow: scroll;
}
#topbar {
background-color: #C0C0F0; /* SSCCE */
height: 48px;
overflow: hidden;
padding-top: 5px;
padding-bottom: 5px;
}
#loginbar {
margin-top: 12px;
float: right;
width: 166px;
height: 32px;
padding-right: 10px; /* SSCCE */
text-align: right; /* SSCCE */
}
#leftbar {
background-color: #C0F0C0; /* SSCCE */
float: left;
width: 150px;
min-height: 90vh;
}
#container {
margin-left: 150px;
background-color: #DCDCDC;
min-height: 90vh;
}
div.ContentWithGradientViewPort {
padding-left: 16px;
padding-top: 8px;
min-height: 90vh;
background: linear-gradient(#E0E0E0, #A3A3A3);
}
div.TopFilterBar {
background-color: #DCDCA0;
}<meta name="viewport" content="width=device-width">
<body>
<!-- Common layout -->
<div>
<div id="topbar">
<!-- SSCCE --><div id="loginbar">XXX</div>
</div>
<div id="leftbar">
<!-- SSCCE --><div style="padding:10px">XXX</div>
</div>
</div>
<div id="container">
<!-- content rendered by specific page -->
<div class="TopFilterBar"> </div>
<div class="ContentWithGradientViewPort">
<!-- SSCCE, width great than view port width -->
<table width=700px>
<tr>
<td style="background-color:yellow">
An overflown content
</td>
</tr>
</table>
</div>
</div>
</body>拜托，有没有办法将带有渐变的背景扩展到完整的浏览器窗口宽度？即使具有不同的 DOM 结构？
谢谢，pf
最佳答案
您只需将 overflow:scroll 应用到您的 div.ContentWithGradientViewPort 元素。
这应该会为您解决所有问题:)
关于html - 水平滚动以显示元素溢出视口(viewport)宽度时未定义的背景，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34382324/