Question

所以，我正在为我的一位朋友建立一个网站，他是一名律师。他给了我一个他喜欢的布局的另一个网站的参考，并问我是否可以使他与那个人相似＃34;。参考站点可能已有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）。

提前致谢！

Answer 1

首先，我建议不要使用最小高度：100％。只需使用高度：100％。 min-height应该主要用于像素或em值。使用％与最小高度失败的目的，你不能有一个最小高度等于你的屏幕的百分比。

我会使用1140 grid system。它易于使用，非常灵活，可以使您的布局轻松快速地进行设计。

使用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>

你走了，问题解决了。

更多HTML / CSS [min-]高度问题

1 个答案: