Question

我有一个div，我想在其他主要div的底部对齐

更新：这是实际的代码：

<div style="width: 800px; height: 400px;"> 
few more controls here
  <div style="height: 230px; ">

                    <bpcms:cmseditableregion runat="server" id="cms1" regiontitle="Content2"
                        regiontype="HtmlEditor" required="false" />
                </div>

                <div style="height: 50px; width: 800px; border: 2px solid #99CC00; font-size: 13px;
                    color: #ffbb33; overflow: hidden; padding: 5px 20px 5px 20px;">
                    <bpcms:cmseditableregion runat="server" id="cms2" regiontitle="Content1"
                        regiontype="TextBox" required="false" />
                </div>
</div>

尽管给出了innerdiv1的固定高度，但是innerdiv 2仍然按照内部div 1的内容继续向上移动

因此，如果innerdiv1中没有内容，则innerdiv 2完全向上移动。有没有办法我可以修复innerdiv2保持低于innerdiv1 250px而不使用绝对定位。

此外，解决方案应适用于所有IE浏览器。

Answer 1

这应该适用于您的第一个问题。

<div id="maindiv">
    <div id="innerdiv1" style="height:200px;">
        few dynamic controls here
    </div>
    <div id="innerdiv2" style="height:50px">
        This div should be just above footer.
    </div>
</div>

编辑：

您可能希望查看有关html和css的这些基本教程。

http://www.w3schools.com/

http://www.w3schools.com/html/default.asp

http://www.w3schools.com/css/default.asp

这适用于您编辑过的问题：

看起来像你的div标签上面的'更多控件'正在推动内容，它应该放在你的div标签内。如果您不希望这样，您可以将这些控件包装在div中并赋予它一个设定的高度。

<div style="width: 800px; height: 400px;">
    <div style="height: 230px;">
        few more controls here
        <!-- this content should be inside the div if you want the content to stay fixed.-->
        <bpcms:cmseditableregion runat="server" id="cms1" regiontitle="Content2" regiontype="HtmlEditor" required="false" />

    </div>

    <div style="height: 50px; width: 800px; border: 2px solid #99CC00; font-size: 13px;color: #ffbb33; overflow: hidden; padding: 5px 20px 5px 20px;">
        <bpcms:cmseditableregion runat="server" id="cms2" regiontitle="Content1"                         regiontype="TextBox" required="false" />
    </div>
</div>

这可能是一种更清洁的方式。

<style>
.outer {
width: 800px;
height: 400px;
background-color:#eee;
}
.top {
height: 230px;
background-color:#fee;
}
.bottom {
height: 50px;
/*height actually 64px when including border and padding*/
width: 800px;
/*width actually 844px when including border and padding*/
border: 2px solid #99CC00;
/* padding adds 2 px to all sides for a total of 4px */
font-size: 13px;color:
#ffbb33;
overflow: hidden;
padding: 5px 20px 5px 20px;
/* padding adds 5px to top and bottom for a total of 10px
 * padding adds 20px to left and right sides for a total of 40px */
background-color:#fee;

}
</style>
<div class="outer">
<div class="top">
    few more controls here
    <bpcms:cmseditableregion runat="server" id="cms1" regiontitle="Content2" regiontype="HtmlEditor" required="false" />
    </div>
<div class="bottom">
    <bpcms:cmseditableregion runat="server" id="cms2" regiontitle="Content1" regiontype="TextBox" required="false" />
    </div>
</div>

Answer 2

<div id="maindiv">
    <div id="innerdiv1" style="height:200px;">

    </div>
    <div id="innerdiv2" style="height:50px;">
    This div should be just above footer.
    </div>
</div>

您的HTML不正确！

Fiddle

Answer 3

使用CSS

<style>
#innerdiv1 { height:200px;}
#innerdiv2 { height:50px;}
</style>

<div id=maindiv>
<div id=innerdiv1>
    few dynamic controls here
</div>
<div id=innerdiv2>
This div should be just above footer.
</div>
</div>

您也可以使用此

<div id=maindiv>
<div style="height:200px;">
    few dynamic controls here
</div>
<div style="height:50px;">
This div should be just above footer.
</div>
</div>

Answer 4

尝试在样式属性中设置高度。

<div style="height:250px;">
     above
</div>
<div style="height: 150px;">
     below
<div/>

请参阅此处的示例和更多教程 http://www.w3schools.com/css/tryit.asp?filename=trycss_dim_height

一个div保持在另一个div之下

4 个答案: