1

我有一个简单的 CSS 固定宽度布局，带有一个容器和一些背景，以及一个三列设计。

<body>
  <form id="form1" runat="server">
    <div id="BGContainer">
      <div id="PageContainer">
      </div>
      <div id="Content">
      <div id="MainContent">
        <asp:ContentPlaceHolder ID="MainAreaContentPlaceholder" runat="server">
        </asp:ContentPlaceHolder>
      </div>
    </div>
    <div id="Bottom">
      <div id="Copyright">
        Copyright
      </div>
    </div>
    </div>
  </form>
</body>

在另一个文件中，我有ContentPlaceHolder

<asp:Content ID="Content1" runat="server" ContentPlaceHolderID="MainAreaContentPlaceholder">
  <div id="Heading">
     Overskrift
  </div>
  <div id="LeftColumn">
    /*Content Here*/
  </div>
  <div id="CenterColumn">
    center
  </div>
  <div id="RightColumn">
    right
  </div>
</asp:Content>

问题是#MainContent没有调整高度。它始终保持相同的高度

CSS

html {
  height:100%;
}

body {
  margin:0;
  width:100%;
  height:100%;
  font-family: Verdana, Sans-Serif;
  background-image:url(../Gfx/Design/bg.png);
  background-repeat:repeat;
}

#BGContainer {
  margin:0px;
  background-image:url(../Gfx/Design/Background-top-gradient.png);
  background-repeat:repeat-x;
  height:210px;
  width:100%;
}

#PageContainer {
  background-image:url(../Gfx/Design/top-gradient.png);
  background-repeat:no-repeat;
  height:100%;
  width:1016px;
  margin-left:auto;
  margin-right:auto;
}

#Bottom {
  background-image:url(../Gfx/Design/Bottom.png);
  background-repeat:no-repeat;
  height:32px;
  width:964px;
  margin-left:auto;
  margin-right:auto;
}

#Content {
  background-color:#FFFFFF;
  background-image:url(../Gfx/Design/content-background.png);
  background-repeat:no-repeat;
  width:1000px;
  height:100%;
  margin-left:auto;
  margin-right:auto;
}

#MainContent {
  width:980px;
  height:100%;
  margin-left:auto;
  margin-right:auto;
  background-color:#FFFFFF;
}

#Copyright {
  color:#000000;
  font-size:xx-small;
  text-transform:uppercase;
  margin-left:50px;
  padding-top:5px;
}

#LeftColumn {
  width:311px;
  margin-left:10px;
  border: 1px solid gray;
  min-height:400px;
  float:left;
}

#CenterColumn {
  width:311px;
  margin-left:10px;
  border: 1px solid gray;
  min-height:400px;
  float:left;
}

#RightColumn {
  width:311px;
  margin-left:10px;
  margin-right:10px;
  border: 1px solid gray;
  min-height:400px;
  float:right;
}
4

5 回答 5

3

清除浮动而不使用任何额外的标记overflow:hidden

#MainContent {overflow:hidden;zoom:1;}

zoom:1 将在 ie6 中调用hasLayout，因此浮动将在 ie6 中清除。

于 2009-08-17T10:40:50.933 回答
1

三列（#LeftColumn, #CenterColumn, #RightColumn）都是浮点数，所以不会增加 的高度#MainContent。尝试div在这三个后面加上一个（可以是空的）clear: both。这将迫使它位于三列下方，并且#MainContent至少足够高以容纳这个新的div.

如果您的问题是#MainContent太高，请注意它有height: 100%，您可以将其删除（然后应用上述修复）。希望有帮助。

于 2009-08-17T10:28:37.417 回答
0

您需要清除浮动内容。

插入如下：

<div id="MainContent">
  <asp:ContentPlaceHolder ID="MainAreaContentPlaceholder" runat="server">
  </asp:ContentPlaceHolder>
  <div class="clear"></div>
</div>

...和CSS：

.clear{clear:both}
于 2009-08-17T10:29:06.667 回答
0

使用<p>标签，您的文本将根据内容需要调整大小

<div style="width:400px; border-bottom:1px solid teal; padding:20px;">

<p>your text or database field here</p>

</div>


我用

当我希望 div 高度根据内部文本的数量而改变时标记。当从在结果之间放置边框的数据库进行查询时，此示例将为您提供一个很好的结果列表。

于 2014-02-25T01:30:36.377 回答
-1

可能是因为您在 #BGContainer 上设置了高度 - 如果您删除它，您可能会发现框随着文本展开

于 2009-08-17T10:29:37.087 回答