代码之家 › 专栏 › 技术社区 › H4mm3rHead

插入文本时,DIV不调整大小

height css

H4mm3rHead · 技术社区 · 16 年前

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

5 回复 | 直到 11 年前

Chris Boyle 16 年前

三列( #LeftColumn , #CenterColumn , #RightColumn )都是浮动的,所以不会增加 #MainContent . 试着放一个 div (可以是空的)就在那三个 clear: both . 这将迫使它坐在三根柱子下面, 主要内容 将至少高到包括这个新的 div .

如果你的问题是 主要内容 太高了,注意它有 height: 100% ,您可以删除(然后应用上面的修复程序)。希望有帮助。

Emily 16 年前

要清除浮动而不使用任何其他标记,请使用 overflow:hidden

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

缩放:1将调用 hasLayout 在IE6中,浮球将在IE6中清除。

Jayx 16 年前

您需要清除浮动内容。

插入如下:

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

……和CSS:

.clear{clear:both}

jacob 11 年前

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

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

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

</div>

我用

当我希望一个DIV高度根据里面的文本量改变时标记。当从数据库查询结果时,这个示例将为您提供一个很好的结果列表,在结果之间放置一个边界。

-1

matpol 16 年前

可能是因为在bgcontainer上设置了高度-如果删除此项,可能会发现该框随文本展开。