html - 带有Foundation框架的全宽页脚 - Thinbug

带有Foundation框架的全宽页脚

时间：2014-08-18 11:23:04

标签： html css zurb-foundation

我试图让我的页脚面板穿过页面，但它似乎只是粘在中间。我的标题填满了整个页面。难道我做错了什么。我基本上试图使底部的两个面板都跨越页面的整个宽度。

HTML

<body>
  <header>
    <div class="large-12">
      <div class="panel">
        <h1 class="nowrap text-center">Header</h1>
      </div>
    </div>
    <br><br>
  </header>

  <div class="large-4 columns">
    <div class="panel">

      <h3>Sidebar</h3>

      <h5>lorem</h5>
        <ul class="text-left ">
          <!-- # used as placeholder -->
          <li><a href="#">link 1</a></li>
          <li><a href="#">link 2</a></li>
          <li><a href="#">link 3</a></li>
          <li><a href="#">link 4</a></li>
          <li><a href="#">link 5</a></li>
        </ul>

      </div>
    </div>

  <div class="large-8 columns">
    <div class="panel">
      <h1>Call To Action</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium quas quasi perspiciatis unde cumque nesciunt nisi eveniet natus nemo quia, sequi non, ab, beatae aliquam. Dolore accusamus quos esse similique architecto, aut consequatur ratione placeat, veritatis ea sit tempore corporis cupiditate voluptas? Nesciunt rem vel corporis consectetur perferendis hic perspiciatis amet totam quod, impedit reiciendis suscipit aperiam, eum ex dolorem fugit repellendus sit. Non, facere labore, veritatis nobis corporis sapiente dignissimos dolore ex maxime a quia ipsum recusandae, quos velit atque perferendis quibusdam, deserunt eius? Modi facilis impedit dolorem saepe, nobis eius voluptatibus perspiciatis iste, quis at, amet ex cum?</p>    
    </div>

    <div class="row">
      <div class="columns large-6">
        <p class="panel columns">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum tempora, ipsam. Quos, hic reprehenderit perferendis ut illo minus. Quae odit laborum excepturi inventore consequuntur deserunt rerum dolorum optio, sit. Maiores.</p>
      </div>

      <div class="columns large-6">
        <p class="panel columns">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio possimus unde labore delectus quia asperiores adipisci magni molestias libero in et modi assumenda nesciunt sapiente, error, necessitatibus, sed accusantium itaque.</p>
      </div>
    </div>

    <div class="row">
      <div class="large-12 columns">
        <div class="panel">
          <h1>Website in no time</h1>
        </div>

       <footer>
         <div class="large-12">
           <div class="panel">
             <h1 class="nowrap text-center">Footer</h1>
           </div>
         </div>
       </footer>

2 个答案:

答案 0 :(得分：0)

问题是您的页脚位于row内。所以它将被限制在基础最大宽度，这是我上次检查时大约960px。当我使用粉底时，我会将页脚宽度设为100％，然后用行包裹内容。

CSS

footer {
  width: 100%;
  margin: 0;
  padding: 0; 
}

HTML

<header>
  <!-- header content-->
</header>

<div>
  <!-- you can wrap your content however you want -->
</div>

<!-- but do not wrap footer if you want it to fill the entire width of the page -->
<footer>
  <div class="large-12">
    <div class="panel">
      <h1 class="nowrap text-center">Footer</h1>
    </div>
  </div>
</footer>

答案 1 :(得分：0)

基金会有以下CSS

.row {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    margin-bottom: 0;
    max-width: 62.5rem;
}

你可以尝试做的是

footer.row {
  max-width: none 
}

希望有所帮助