DIV背景不画了整个事业部

Question

我有以下代码：

资源：

<html>
<head>
<title>Testing on IE 11</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body {
  margin: 0;
  padding: 0;
  background-color: #d6ffbb;
}
.page-container {
  padding: 10px;
}
footer {
  text-align: justify;
  font-family: Arial;
  font-size: 14px;
  letter-spacing: normal;
  padding: 20px;
  color: #fff;
  background: url("https://i.ibb.co/hYXDL2N/pattern-dark.jpg") top center
    repeat;
}
/* BEGIN OF CODE BLOCK FOR STICKY FOOTER */
body {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  height: 100%;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}
.page-container {
  -webkit-box-flex: 1;
  -ms-flex: 1 0 auto;
  flex: 1 0 auto;
}
/* END OF CODE BLOCK FOR STICKY FOOTER */
</style>
</head>

<body>
  <div class="page-container">
    hello world<br />
    hello world<br />
    hello world<br />
    hello world<br />
    hello world<br />
    hello world<br />
    hello world<br />
    hello world<br />
    hello world<br />
    hello world<br />
    hello world<br />
    hello world<br />
    hello world<br />
    hello world<br />
    hello world<br />
  </div>
  <footer>
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting
      industry. Lorem Ipsum has been the industry's standard dummy text ever
      since the 1500s, when an unknown printer took a galley of type and
      scrambled it to make a type specimen book. It has survived not only five
      centuries, but also the leap into electronic typesetting, remaining
      essentially unchanged. It was popularised in the 1960s with the release
      of Letraset sheets containing Lorem Ipsum passages, and more recently
      with desktop publishing software like Aldus PageMaker including versions
      of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and
      typesetting industry. Lorem Ipsum has been the industry's standard dummy
      text ever since the 1500s, when an unknown printer took a galley of type
      and scrambled it to make a type specimen book. It has survived not only
      five centuries, but also the leap into electronic typesetting, remaining
      essentially unchanged. It was popularised in the 1960s with the release
      of Letraset sheets containing Lorem Ipsum passages, and more recently
      with desktop publishing software like Aldus PageMaker including versions
      of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and
      typesetting industry. Lorem Ipsum has been the industry's standard dummy
      text ever since the 1500s, when an unknown printer took a galley of type
      and scrambled it to make a type specimen book. It has survived not only
      five centuries, but also the leap into electronic typesetting, remaining
      essentially unchanged. It was popularised in the 1960s with the release
      of Letraset sheets containing Lorem Ipsum passages, and more recently
      with desktop publishing software like Aldus PageMaker including versions
      of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and
      typesetting industry.
    </p>
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting
      industry. Lorem Ipsum has been the industry's standard dummy text ever
      since the 1500s, when an unknown printer took a galley of type and
      scrambled it to make a type specimen book. It has survived not only five
      centuries, but also the leap into electronic typesetting, remaining
      essentially unchanged. It was popularised in the 1960s with the release
      of Letraset sheets containing Lorem Ipsum passages, and more recently
      with desktop publishing software like Aldus PageMaker including versions
      of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and
      typesetting industry. Lorem Ipsum has been the industry's standard dummy
      text ever since the 1500s, when an unknown printer took a galley of type
      and scrambled it to make a type specimen book. It has survived not only
      five centuries, but also the leap into electronic typesetting, remaining
      essentially unchanged. It was popularised in the 1960s with the release
      of Letraset sheets containing Lorem Ipsum passages, and more recently
      with desktop publishing software like Aldus PageMaker including versions
      of Lorem Ipsum.
    </p>
  </footer>
</body>
</html>

但是：四联zxsw POI

此代码工作罚款：{https://yv983q28xx.codesandbox.io/，Chrome，Firefox}。

但在Edge我得到以下行为中运行时：

滚动到顶部：

滚动到下（绘画只是直到前一图像的结束）：

正如你可以看到当滚动底部的DIV背景不画整个股利。

重要提示：这是一个IE11实现，所以这是一个要求，当你缩小页脚得到贴附在sticky-footer的底部。

如何解决这一对screen / viewport不影响其他浏览器的任何想法？

如果可能的话，请用叉子叉IE11并粘贴在这里您的解决方案的链接。

谢谢！

Answer 1

1
投票

应用codesandbox.io到您的页脚。

flex: 0 0 auto;

Answer 2

尝试给页脚的ID和这个代码片段添加到它

DIV背景不画了整个事业部

问题描述投票：1回答：2

2个回答

最新问题

DIV背景不画了整个事业部

问题描述 投票：1回答：2

2个回答

最新问题

问题描述投票：1回答：2