文本插入Div时不调整

StackOverflow https://stackoverflow.com/questions/1287190

  •  18-09-2019
  •  | 
  •  

题

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

解决方案

在三列（#LeftColumn，#CenterColumn，#RightColumn）都浮动，所以他们不会增加#MainContent的高度。尝试把一个div（可以为空）刚过这三个与clear: both。这将迫使它坐三列的下方，并且#MainContent将至少高到足以包含此新div。

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

其他提示

要清除漂浮而没有任何额外的标记使用overflow:hidden 

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

缩放：1将调用 hasLayout的在IE6所以浮子将在IE6清除。

您必须清除浮动内容。

插入如下所示：

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

...和CSS：

.clear{clear:both}

使用<p>标签，并根据内容需要您的文字将调整结果

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

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

</div>

结果，我使用

标记时，我想一个div高度取决于内的文本的量发生变化。 从一个放置在边框之间结果数据库查询时，这个例子会给你一个不错的结果列表。

大概是因为你有一个高度上#BGContainer设置 - 如果你删除这一点，你可能会发现，盒子与文本扩展

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top