站点基础全屏布局
站点基础全屏布局
提问于 2015-01-27 13:55:47
我试图创建一个使用Zurb的网站基金会全屏布局。我需要使用屏幕的全部宽度。我还希望在屏幕左侧有两个用于导航的列。布局将如下所示：
+--------+--------+---------------------+
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
+--------+--------+---------------------+左两列的大小是固定的.然而，大多数列都需要占用剩余的空间。为了构建这个程序，我目前编写了以下代码：
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<link rel="icon" type="image/png" href="/resources/root/images/favicon.png">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.0/css/foundation.min.css" />
<style type="text/javascript">
. .app {
height: 100%;
width: 100%;
position: relative;
overflow: hidden;
}
.app-col {
height: 100%;
}
</style>
</head>
<body>
<div class="app">
<div class="row">
<div class="app-col large-2 columns" style="background-color:blue;">
<div class="title-2">Here</div>
<nav>
<div><a href="/location-1">Nav 1</a></div>
<div><a href="/location-2">Nav 2</a></div>
</nav>
</div>
<div class="app-col large-2 columns" style="background-color:red;">
<nav>
<div><a href="/location-a">Sub Nav 1</a></div>
<div><a href="/location-b">Sub Nav 2</a></div>
</nav>
</div>
<div class="app-col large-8 columns">
content
</div>
</div>
</div>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.0/js/foundation.min.js"></script>
</body>
</html>不幸的是，当我运行它时，布局似乎只占屏幕的70%左右，2)它没有填充屏幕的整个高度。
我做错了什么？
回答 2
Stack Overflow用户
回答已采纳
发布于 2015-01-27 14:44:18
对于第一个问题，这是因为要应用Zurb的Foundation类行，您可以包括一个要覆盖的自定义类，并且具有完整的宽度，例如：
.fullwidth {
width: 100%;
height: 100%;
margin-left: auto;
margin-right: auto;
max-width: initial;
}因此，第二个问题可以使用一个名为均衡器的新特性来回答。
检查这个小提琴
也许另一个解决方案是使用一些javascript，比如这里。
HTML：
<div class="app">
<div class="row fullwidth" data-equalizer>
<div class="app-col large-2 columns" style="background-color:blue;" data-equalizer-watch>
<div class="title-2">Here</div>
<nav>
<div><a href="/location-1">Nav 1</a></div>
<div><a href="/location-2">Nav 2</a></div>
</nav>
</div>
<div class="app-col large-2 columns" style="background-color:red;" data-equalizer-watch>
<nav>
<div><a href="/location-a">Sub Nav 1</a></div>
<div><a href="/location-b">Sub Nav 2</a></div>
</nav>
</div>
<div class="app-col large-8 columns" style="background-color:green;">
content
</div>
</div>
</div>CSS：
.app {
height: 100%;
width: 100%;
position: relative;
overflow: hidden;
}
.app-col {
height: 100%;
}
.fullwidth {
width: 100%;
height: 100%;
margin-left: auto;
margin-right: auto;
max-width: initial;
}Stack Overflow用户
发布于 2016-12-14 08:38:24
这是旧的，但以防万一其他人正在寻找这个答案。Foundation6现在有一个类，您可以使用它来达到100%的宽度。只需使用扩展的类。
<div class="row expanded">
content goes here
</div>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/28172215
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号