Div Div over Div，背景大小=封面，溢出=隐藏和大图像

Question

我正在尝试将填充了文本 (id = rulesContent) 的div垂直和水平居中于背景图像 (id = rulesBackground) 。背景图片为3840 x 2160 px，但我只希望用户看到它的左上角，并根据其屏幕大小进行调整。我找到了那个部分。

如果#rulesContent比页面长，我希望它显示全部并且能够滚动到它的底部，这就是我将其位置保持为绝对的原因。

我需要支持IE9 +。我花了一整天时间寻找解决方案。

指向CodePen的链接：https://codepen.io/kokeefe/pen/OxjQxa

body {
  text-align: center;
  font-size: 1.2em;
  font-family: Arial;
}

#container {
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

#rulesBackground {
  background: url("http://katyokeefe.com/bets/includes/images/stadium-seats.png") no-repeat top center fixed;
  background-size: cover;
  height: 100vh;
  overflow: hidden;
}

#rulesContent {
  background-color: white;
  opacity: .9;
  display: inline-block;
  vertical-align: middle;
  top: 50vh;
  overflow-y: auto;
}

#rules {
  margin: 0 10%;
  padding: 0;
  max-width: 700px;
}

li {
  text-align: left;
  margin: 15px;
}


/*only menu styling follows*/

#nav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: auto;
  background-color: #051C2C;
  display: block;
}

#nav>li {
  float: left;
}

#nav>li a {
  display: block;
  color: white;
  text-align: center;
  vertical-align: middle;
  padding: 14px 16px;
  text-decoration: none;
}


/* Change the link color to #111 (black) on hover */

#nav li a:hover {
  background-color: #DC4405;
}

<div id="container">
  <ul id="nav">
    <li>
      <a href="">Menu</a>
    </li>
  </ul>
  <div id="rulesBackground">

    <div id="rulesContent">
      <h2>The Rules</h2>
      <ol id="rules">
        <li>Pick one game winner per week straight up (no spread).</li>
        <li>You can only pick one NFL Team per week; you cannot pick an NFL Team more than once throughout the 16 game season.</li>
        <li>This pool only lasts for the 16 game season and does not include the playoffs.</li>
        <li>You can pick your NFL winner at any time throughout the official NFL Week (i.e. Week 1, Week 2, etc.), but you must have your picks in before the game starts, no if’s and or butts.</li>
        <li>If you lose, you’re OUT!</li>
        <li>The player who lasts the longest wins.</li>
        <li>In the case of a tie (let’s say 2 remaining players lose in the same week), the pool is split.</li>
        <li>Winner takes all!</li>
        <li>In the case of an NFL game tie, you’re not officially out, and may continue forward. However, your win will only counts as a ½ point in the case of multiple winners.</li>

      </ol>
    </div>
  </div>
</div>

Answer 1

请检查一下。我尽力解决你的问题。检查代码段和响应式视图的完整页面。

body {
  text-align: center;
  font-size: 1.2em;
  font-family: Arial;
  margin:0;
}
#container {
  width: 100%;
  height: 100vh;
}
#rulesBackground {
  background: url("http://katyokeefe.com/bets/includes/images/stadium-seats.png") no-repeat top center;
  background-size: cover;  
  height: calc(100% - 82px);
  overflow: hidden;
  position:relative;
}
#rulesContent {
  background-color: white;
  display: inline-block;
  left: 0;
  margin: 0 auto;
  max-width: 700px;
  width:100%;
  opacity: 0.9;
  overflow-y: auto;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  vertical-align: middle; 
  padding:30px;
}
h2{
  margin-top:0;
}
li {
  text-align: left;
  margin: 15px;
}

/*only menu styling follows*/

#nav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: auto;
  background-color: #051C2C;
  display: block;
}
#nav>li {
  float: left;
}
#nav>li a {
  display: block;
  color: white;
  text-align: center;
  vertical-align: middle;
  padding: 14px 16px;
  text-decoration: none;
}
/* Change the link color to #111 (black) on hover */

#nav li a:hover {
  background-color: #DC4405;
}

/*for tablet view*/
@media screen and (max-width:1024px){
#rulesContent { 
  height:500px;  
  max-width: 60%;
}
}
/*for mobile view*/
@media screen and (max-width:767px){
#rulesContent { 
  height:200px;
  max-width: 75%;
}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <ul id="nav">
    <li>
      <a href="">Menu</a>
    </li>
  </ul>
  <div id="rulesBackground">

    <div id="rulesContent">
      <h2>The Rules</h2>
      <ol id="rules">
        <li>Pick one game winner per week straight up (no spread).</li>
        <li>You can only pick one NFL Team per week; you cannot pick an NFL Team more than once throughout the 16 game season.</li>
        <li>This pool only lasts for the 16 game season and does not include the playoffs.</li>
        <li>You can pick your NFL winner at any time throughout the official NFL Week (i.e. Week 1, Week 2, etc.), but you must have your picks in before the game starts, no if’s and or butts.</li>
        <li>If you lose, you’re OUT!</li>
        <li>The player who lasts the longest wins.</li>
        <li>In the case of a tie (let’s say 2 remaining players lose in the same week), the pool is split.</li>
        <li>Winner takes all!</li>
        <li>In the case of an NFL game tie, you’re not officially out, and may continue forward. However, your win will only counts as a ½ point in the case of multiple winners.</li>

      </ol>
    </div>
  </div>
</div>