Question

我希望页面左侧的div作为列，而另一个div填充页面的右侧。我附上的屏幕截图显示，在Firefox和IE7中（滚动条关闭），两个div超出了屏幕的界限。我试图在所有方面获得margin 2px，以便可以看到border的{{1}}，但这不起作用。

CSS

div

和ASPX页面

* {
  margin: 0;
}
html, form, body {
  height: 100%;
  margin:0;
  padding:0;
  font-family: "Segoe UI", "Lucida Grande", Helvetica, verdana, sans-serif;
  font-size: 11px;
  background: url(/Manage.UI/App_Themes/Default/header.png) no-repeat;
  overflow: hidden;
}
#header {
  height:162px;
  background: url(/Manage.UI/App_Themes/Default/header.png) no-repeat;
}
#left {
  top: 65px;
  border-width: 1px;
  border-style: solid;
  border-color: #c6c6c6;
  min-height:100%;
  height: auto !important;
  height: 100%;
  width:300px;
  bottom:100px;
  left: 2px;
  position: absolute;
  float:left;
  background-color: White;
}
.wrapper {
  min-height: 100%;
  width: 100%;
  height: auto !important;
  height: 100%;
  top: 0px;
  position: relative;
  margin: 2px 2px 2px 2px;
}
#right {
  top: 65px;
  border-width: 1px;
  border-style: solid;
  border-color: #c6c6c6;
  height:100%;
  width:100%;
  left: 305px;
  position: absolute;
  float:right;
  background-color: White;
}

Answer 1

使用Faux columns。下面是我拼凑的一个工作示例（没有背景图片）。

另外，我对你的CSS进行了一些更改。

对于你的CSS，我做了一个穷人的reset.css，由1条规则组成。您不应使用*选择所有元素并重置内容，而应使用真实的reset css stylesheet。
我使用的是人造柱，没有背景图片（我留下了评论的位置）
我使用了"modern" approach to clear the floats for my columns from quirksmode.org。它适用于所有浏览器，并使您的标记更清晰。
我重命名了您的列ID。这是为了让你的标记更具语义性。您的ID和类应具有定义内容的语义名称，而不是样式。您的CSS定义了样式，而不是HTML。保持这种状态是一种很好的做法。

CSS：

html, body, form, div {
    margin: 0;
    padding: 0;
    border: 0;
}
#header {
    height:80px;
    border: 1px solid #000;
}
#footer  {
    height: 80px;
    border: 1px solid #000;
}
.wrapper {
    width: 100%;
    overflow: auto;
    border: 1px solid #000;
    /* Place faux column background image rule here */
}

#nav {
    float: left;
    width: 25%;
}

#content {
    float: left;
    width: 75%;
}

HTML：

<head>
    <title></title>
    <link href="Core.css" rel="Stylesheet" />
</head>
<body>
    <form id="form1" runat="server">
        <div id="header">Header</div>
        <div class="wrapper">
            <div id="nav">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
            <div id="conent">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
        </div>
        <div id="footer">Some footer content</div>
    </form>
</body>
</html>

Answer 2

编辑：丹打败了我。

使用仿色柱可获得相同的效果。基本上你创建一个向下重复的背景图像，这是列的宽度，使它看起来像是一直向下延伸，而不是它。

尝试在不使用固定高度或其他黑客的情况下在css中制作等高的列将会给你带来痛苦。

CSS列故障

2 个答案: