html - 部分内容在保留在其容器内时不会调整大小

Question

我正在创建一个响应式、移动优先的网站，但我遇到了一个问题，#news 中的内容随着浏览器调整大小时，部分将不会留在该部分内。

最初发生这种情况时，内容会扩展并覆盖页脚区域，所以我搜索并发现有人说我应该把 overflow: auto在该部分上，但正如您将在屏幕截图中看到的那样，这只会使内容位于页 footer 分后面，我也不希望这样。

我想知道的是，我怎样才能使新闻部分保持在页脚上方并随着浏览器的扩展而调整大小。

这是一个使用虚拟图像重现问题的代码笔!! http://codepen.io/marlee/pen/OMeKWa

让我们从屏幕截图开始:

我在这里展示的是当我展开窗口时，日期和链接在页 footer 分后面消失。

这是该部分的 HTML:

 <section id="news">
    <h2>Latest News</h2>
      <line></line>
    <ul>
      <li>
        <img src="images/tech.jpg" alt="New Product Strategy for SharePoint Flex in 2016" />
          <small>19 January 2016</small>
          <a href="#">LookOut Software accelerates innovation with SharePoint Flex, unveils product strategy for Spring and Summer 2016</a>
      </li>

      <li>
        <img src="images/world-economic-forum.png" alt="LookOut Software Chairman to participate in World Economic Forum in Toronto 2016" />
          <small>5 February 2016</small>
          <a href="#">LookOut Software Chairman to participate in the World Economic Forum Annual Meeting 2016</a>
      </li>

      <li>
        <img src="images/health.jpg" alt="LookOut Software joins the fight against the Zika virus" />
          <small>12 February 2016</small>
          <a href="#">LookOut Software announces partnership with the World Health Organization to combat Zika virus</a>
      </li>

      <li>
        <img src="images/render-logo.jpg" alt="LookOut founder to speak at Render Conference in Oxford" />
          <small>20 February 2016</small>
          <a href="#">LookOut Software founder and CEO to speak at Render Conference in Oxford, UK this April</a>
      </li>
    </ul>
 </section>

/* Footer */

<footer>
    <div class="footer-top">
      <div class="product-column">
        <h4>Products</h4>
          <ul class="products">
            <li>
              <a href="http://www.sharepointflex.com">SharePoint Flex</a>
            </li>
            <li>
              <a href="#">Flex Platform</a>
            </li>
            <li>
              <a href="#">Flex Enterprise</a>
            </li>
            <li>
              <a href="#">Pricing</a>
            </li>
          </ul>
      </div>
      <div class="resources-column">
        <h4>Resources</h4>
          <ul class="resources">
            <li>
              <a href="#">Documentation</a>
            </li>
            <li>
              <a href="#">Blog</a>
            </li>
            <li>
              <a href="#">Get Started</a>
            </li>
          </ul>
      </div>
      <div class="about-column">
        <h4>About</h4>
          <ul class="about">
            <li>
              <a href="#">About Us</a>
            </li>
            <li>
              <a href="#">Customers</a>
            </li>
            <li>
              <a href="#">Partners</a>
            </li>
          </ul>
      </div>
      <div class="support-column">
        <h4>Support</h4>
          <ul class="support">
            <li>
              <a href="#">Help</a>
            </li>
            <li>
              <a href="#">Contact</a>
            </li>
            <li>
              <a href="#">Open a ticket</a>
            </li>
          </ul>
      </div>
    </div>
    <div class="footer-bottom">
        <img src="images/lookout-temp.png">
        <p>&copy; 2016 LookOut Software</p>
    </div>
 </footer>

还有 CSS:

/* Latest News Section */

#news{
height: 97rem;
background-color: white;
box-shadow: 0 0 2px rgba(6,8,8,0.15);
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
overflow: auto;
}

#news h2{
text-align: center;
}

line{
display: block;
width: 30%;
height: 1px;
background: #e8e8e8;
}

#news ul{
display: flex;
flex-flow: column;
list-style: none;
padding-left: 0;
}

#news li{
margin: 1em .5em;
}

#news img{
width: 100%;
}

#news a{
text-decoration: none;
color: #3a3a3a;
font-size: 1rem;
}

/* Footer CSS*/

/* Footer Top */

.footer-top{
background-color: #F0F0F0;
height: 24rem;
display: flex;
flex-flow: row wrap;
}

.footer-top ul{
list-style-type: none;
padding-left: 1.5rem;
}

.footer-top h4{
padding-left: 1.5rem;
margin-bottom: .5rem;
}

.footer-top a{
text-decoration: none;
color: #3a3a3a;
font-size: 1rem;
}

.resources-column, .about-column, .product-column{
padding: .5rem;
}

.support-column{
padding-left: 2.3rem;
}

/* Footer Bottom */

.footer-bottom{
background-color: #F6F6F6;
height: 10rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

.footer-bottom img{
height: 6.25rem;
width: 15.625rem;
}

.footer-bottom p{
font-size: .80rem;
}

感谢任何帮助!

Answer 1

您已使用 height: 97rem; 限制了 #news 部分的高度。

此固定高度可防止布局调整到不同的屏幕尺寸。

取而代之的是:

#news { height: 97rem; }

试试这个:

#new { min-height: 97rem; }

而且您不再需要 overflow: auto。