0

所以我正在为我的一个律师朋友做一个网站。他给了我一个他喜欢的布局的参考，并问我是否可以“使他与那个相似”。参考站点可能已有 10 年历史，并使用 5 级深度的嵌套表完成，因此我决定像优秀的 Web 开发人员一样使用 CSS。现在的问题是他想要一个带有标题的两列布局，但其中一列与标题重叠而另一列不重叠。我把网站布置成这样：

<html style="min-height: 100%">
<head>...</head>
<body style="min-height: 100%">
  <div id="left" style="height: 100% !important">
    ...stuff...
  </div>
  <div id="header">
    ...stuff...
  </div>
  <div id="right" style="height: 100% !important">
    ...stuff...
  </div>
</body></html>

一切都使用相对定位和百分比或自动高度/宽度。现在的主要问题是，正如预期的那样，#left 和#right 的高度都是页面的 100%。问题是#right div 被向下推到它上面的#header div，所以页面底部有一些额外的空间，仅由#right div 占据。有没有解决的办法？我考虑过将#header 的样式更改为具有百分比高度并从#right 的高度中减去它，但这对我来说似乎很笨拙（最重要的是它可能会破坏IE）。

提前致谢！

4

1 回答 1

1

首先，我不建议将 min-height:100% 用于任何事情。只需使用高度：100%。min-height 应该主要用于像素或 em 值。将 % 与 min-height 一起使用会达到目的，您不能将最小高度等于屏幕的百分比。

我会使用1140 网格系统。它易于使用，非常灵活，并且可以使您的布局轻松快速地设计。

使用 1140 网格系统试试这个：

<div class="container">   
    <div class="row">
        <div class="twelvecol">
            <p>Header area!!!!</p>
        </div>
    </div>
</div>
<div class="container">   
    <div class="row">
        <div class="sixcol">
            <p>left column</p>
        </div>
        <div class="sixcol last">
            <p>right column</p>
        </div>
    </div>
</div>

就这样，问题解决了。

于 2012-02-19T21:56:53.197 回答