Question

我正在创建一个响应式移动优先网站，我遇到了一个问题， #news部分内的内容将不会停留在该部分内，因为浏览器会调整大小。 < / p>

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

我想知道的是，如何将新闻部分保留在页脚之上，并在浏览器扩展时调整大小。

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

让我们从屏幕截图开始：

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

以下是此部分的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

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

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

而不是：

#news { height: 97rem; }

试试这个：

#new { min-height: 97rem; }

你不再需要overflow: auto。

部分内容在保留在其容器

1 个答案: