中心 Div 在 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

请检查这个。我尽力解决你的问题。签入整页 sn-p 代码和响应式视图。

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>