Question

我有一个两列布局（左栏和主内容容器），页面顶部有另一个栏。主容器的背景具有垂直梯度。当我调整浏览器窗口的大小时，它按预期工作。

如果有一个不可包装的元素溢出视口宽度，浏览器会显示水平滚动条。但如果内容滚动正确，在页面正文的右侧，则有未定义的 - 白色背景。

我尝试简化我的布局并在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">&nbsp;</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

水平滚动以显示元素oveflown视图端口宽度

0 个答案: