我试图让我的页脚面板横跨整个页面，但它似乎只是停留在中间。我的标题已填满整个页面。难道我做错了什么。我基本上是在尝试让底部的两个面板横跨页面的整个宽度。
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>
最佳答案
问题是您的页脚位于行 内。所以它将被限制为 Foundations 最大宽度，这是我上次检查时大约 960px。当我使用 foundation 时，我会将页脚设置为 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>
关于html - Foundation 框架的全宽页脚，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25362140/