1

コンテナーといくつかの背景を含む単純な CSS 固定幅レイアウトと、3 列のデザインがあります。

<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でfloatがクリアされます。

于 2009-08-17T10:40:50.933 に答える
1

3 つの列 ( #LeftColumn、#CenterColumn、#RightColumn) はすべて float であるため、 の高さは増加しません#MainContent。divの 3 つの直後に (空でもかまいません) を入れてみてくださいclear: both。これにより、3 つの列の下に#MainContent配置され、少なくともこの new を含めるのに十分な高さになります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 に答える