Css 插入文本时，Div未调整大小_Css_Height

Css 插入文本时，Div未调整大小

css

Css 插入文本时，Div未调整大小,css,height,Css,Height,我有一个简单的CSS固定宽度布局，有一个容器和一些背景，还有一个三列设计 <body> <form id="form1" runat="server"> <div id="BGContainer"> <div id="PageContainer"> </div> <div id="Content"> <div id="MainContent">

我有一个简单的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>

问题是，

#MainContent

没有调整高度。它总是保持相同的高度

CSS

这三列（

#LeftColumn

，

#CenterColumn

，

#RightColumn

）都是浮动的，因此它们不会增加

#MainContent

的高度。尝试将

div

（可以是空的）放在这三个div之后，并使用

清除：两个

。这将迫使它位于三列之下，并且

#MainContent

至少足够高，可以包含这个新的

div

如果您的问题是

#MainContent

太高，请注意它有

高度：100%

，您可以将其删除（然后应用上述修复）。希望有帮助。

您需要清除浮动内容

插入如下内容：

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

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

，以清除浮动而无需任何其他标记使用

溢出：隐藏

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

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

使用

标记，文本将根据内容需要调整大小

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

此处是您的文本或数据库字段

</div>

当我希望div高度根据内部文本的数量而改变时，我使用标记。

当从数据库中查询结果时，此示例将为您提供一个很好的结果列表，该数据库在结果之间放置了一个边框。

#BGContainer不是问题所在，删除其高度并不能解决问题。另一个解决方案是设置#MainContent的高度，但随后您必须调整该值以适应其内容的高度。这实际上解决了我的问题，或者至少解决了一部分问题，我明确指出：这两个都在我的样式表中。现在一切都如愿了：-）

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

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

</div>