css - 基础 css div 放置

Question

我正在尝试使用 Foundation 5 框架定位 3 个 div。前两个(div 1，div 2)我希望它们是浏览器窗口的全高，第三个可以只是一个普通的 div。

我应该如何进行？非常感谢代码示例。

Answer 1

试试这个:

<div class="row">
   <div class="small-1 columns"></div>
   <div class="small-2 columns"></div>
   <div class="small-9 columns"></div>
</div>

它是 zurbs 的简单使用 grid layout .

对于全宽，请在您的 _settings.scss 文件中调整这些设置。

$row-width: rem-calc(1000); //make this max of screen size
$column-gutter: rem-calc(0);
$total-columns: 12 ;

您还可以使用类或 ID 显式声明 width:100%;。