骨架网格系统：使容器 100%

Posted 2023-02-22

【中文标题】骨架网格系统：使容器 100%

【英文标题】：skeleton grid system: make container 100%

【发布时间】：2013-03-10 02:58:14

【问题描述】：

是否可以将根 div（容器）设为文档的 100%？ 这是我的代码：

<div class="container" style="width:100%;">
    <div id="topbar" class="sixteen columns" style="background-color:green;">topbar topbar topbar topbar topbar topbar </div>
</div>

谢谢

【问题讨论】：

div 始终为 100%（如果未覆盖）。

您能否说明您希望最终产品的外观？还是现在的样子？

他正在使用一个名为 Skeleton 的响应式平台。他试图覆盖随 Skeleton 提供的容器类，以拥有一个完整的浏览器宽度容器，而不是限制为 1140 像素的容器。他需要定义自己的样式来执行此操作，而不是覆盖已经存在的样式。

【参考方案1】：

我知道这个问题是很久以前提出的，但 Skeleton 有用于此的实用程序类。

基本上将.u-full-width 和.u-max-full-width 类添加到具有.container 类的任何<div>。

只需确保它位于类 .container 的 <div> 元素上，因为它似乎不适用于具有 .row 或 .column 类的 <div> 元素。

【讨论】：

我的 Skeleton 版本似乎太旧了，无法使用.u-full-width。幸运的是，它的 CSS 看起来很简单：.u-full-width width: 100%; box-sizing: border-box;

【参考方案2】：

您需要创建自己的容器类。我不知道骨架响应平台的 css 在我脑海中是什么样子的。我用一个叫 Columnal，我知道它是类似的，所以它应该是这样的......

.full-width-container 
width: 100%;
max-width: 100%;
clear: both;
margin: 0 auto;

正常的css应该是.container max-width: 1140px; width: 100%; clear: both; margin: 0 auto;