Question

我正在编写我的第一个液体布局，我不得不说它比固定宽度布局更耗时。但是，我看到了优点，所以我想让它发挥作用！

这是我的情况：

我有一个带有一些文本的标题，使得标题可变高度取决于浏览器文本大小。
我左边有一个固定宽度的导航栏。导航向左浮动，并且具有与宽度相同的像素数的负边距，这有效地使其进入零宽度空间。整洁！
我的主要内容部分是浮动的。它的左边距是导航的宽度，因此内容可以避免隐藏在导航链接的下方。
导航在源代码中排名第二，因此辅助技术的用户首先获得内容。

这很有用，但前提是主内容部分的内容包含环绕页面整个宽度的文本行。如果内容仅在短行或列表中，则内容部分的宽度与其中的内容相同。由于内容部分是浮动的，这意味着在这些情况下内容看起来不对。显然页面宽度是可变的，因此对于较大的显示器，这个问题更常见。

我正在寻找一种方式来显示内容部分始终填充页面，以便内容位于左侧，即使线条很短，也会向右填充。我已经尝试过绝对定位，但是通过清除浮动的导航和内容部分会弄乱保留在正确位置的页脚。

任何建议都非常有用！

修改：

根据要求，我提供了一些演示页面。

这是一个内容很宽，看起来不错的网页：http://www.qkschool.org.uk/static/redesign/widepage.html

这是一个内容很薄的页面，由于浮动，所以它们都是正确对齐的：http://www.qkschool.org.uk/static/redesign/thinpage.html

非常感谢！

Answer 1

这一直是我最喜欢的液体布局来源：

http://matthewjamestaylor.com/blog/perfect-3-column.htm

（确保点击所有不同的变体）

我不是说你应该放弃学习自己，但我认为值得一看这些布局中使用的一些技巧。所有这些都在IE6和IE7中运行良好，并使用良好的内容优先源顺序。如果需要，它们可以很容易地变成固定宽度。老实说，从来没有找到我喜欢的另一种布局，就像在本网站上发布的布局一样。

我对这些布局使用的一个变体是用一个额外的内部div包裹每一列，并在此div上设置边距或填充，而不是其他任何东西，这将使宽度和定位计算更简单（你会看到是否你看看吧。我还将整个事物包装在一个div中，以便更容易地实现最大宽度和居中。

祝你好运，如果您需要任何有关此技术的建议，请告诉我，我已经使用它多年了，它对我很有帮助。

Answer 2

以下是我自己的布局技术的摘要，它在许多网站上使用，它可以使用任意数量的列，但此示例只是处理您的左侧：

JSFiddle example

示例显示页脚将始终保持在最长列

之下

侧边栏可以是任何宽度，只需更改内容的边距以适应，您甚至可以向左侧浮动两个侧边栏 - 然后只需增加#content上的边距即可清除它们。

或者（或者也可以）侧边栏（或者2）可以向右浮动，然后你只是将#content div放在右边而不是左边来“清除”它们

这是源订购的，在侧边栏之前的内容..它可以包含任意数量的标题子标题和页脚（或在内容下），而不会影响主“列”区域，并且您可以浮动侧边栏（如果不止一个），也可以以任何顺序改变它们的顺序，宽度，数量，甚至在事实之后，仅通过CSS

我认为我的布局技术甚至可能被合并到一些Drupal主题中并且正在使用中，它当然也被用在一些较大的网站上，但我失去了轨道......它永远不会让我失望:)）

这是模板代码..

<强> CSS：

html, body {padding: 0; margin: 0;}

#footer,#header {background: #444; color: #fff; clear: both;}

#container { /* always the same don't add anything here */
overflow: hidden;
width: 100%;
}

#contentwrap {/* always the same do not add anything else here */
float: left;
width: 100%;
margin-right: -100%;
}

#content {
margin-left: 270px; /* same as width plus padding of the sidebar(s) and in the same direction(s) */
padding: 20px;
border-left: 1px solid #444;
}

#sidebar {
float: left;
width: 230px;
padding: 20px;
background: #dad;
border-right: 1px solid #444;
}

<强> HTML：

<div id="header">header</div>
<div id="container">
<div id="contentwrap">
<div id="content">
<h1>Content  remaining width</h1>
<p>add more content here</p>
<h2>Header Level 2</h2>     
</div><!-- content  -->
</div><!-- contentwrap  -->

<div id="sidebar">
<p>short sidebar</p>
<p>add more content here until this gets longer than main and the footer will still stay below</p>
</div>
</div>
<div id="footer">footer</div>

这非常灵活，因为侧边栏也可以固定宽度或流畅，它可以与ems，％，px一起使用..你可以命名

是的，我附上了这段代码;）

已编辑添加 如果较旧的IE（6确实）确实给内容区域内的浮动/悬停带来麻烦，#content div可能需要设置haslayout，如果是这样的话，只需添加zoom: 1;实际上在我的布局中我仍然会这样做出于习惯！

Answer 3

如果从物理学的角度考虑，即使是液体也有界限。当它膨胀太多时会变成气体。当它收缩太多时，它变得坚实。在网页设计中，边界也很重要。我建议研究弹性设计（松散地转换为在特定参数范围内灵活的设计）。

以下是一些可以帮助您入门的链接：

Answer 4

在没有看到设计的情况下很难分辨，但100％的高度和宽度可以伪造样式父元素（例如使用正文背景或包装div）。

如果您的最后一点并不重要（我猜这是因为您提到了它......）您还可以切换浮动的顺序并从内容中移除浮动。

Answer 5

您可以尝试使用Fluid 960 grid system - 让它工作，然后删除/重命名类以使其更具语义。

液体布局：带边距的浮子可以强制为100％宽度吗？

5 个答案:

JSFiddle example