-1

他のメイン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の高さを固定しているにもかかわらず、innerdiv2はinnerdiv1のコンテンツに従って上昇し続けます。

したがって、innerdiv1内にコンテンツがない場合、innerdiv2は完全に上に移動します。絶対測位を使用せずにinnerdiv2をinnerdiv1より250px下に保つように修正する方法はありますか?

また、ソリューションはすべてのIEで機能するはずです。

4

4 に答える 4

3

これは最初の問題で機能するはずです。

<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>
于 2013-01-11T16:47:22.903 に答える
1
<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が正しくありません!

フィドル

于 2013-01-11T16:47:37.207 に答える
1

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>
于 2013-01-11T16:47:42.427 に答える
0

スタイル属性で高さを設定してみてください。

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

ここで例とその他のチュートリアルを参照して くださいhttp://www.w3schools.com/css/tryit.asp?filename=trycss_dim_height

于 2013-01-11T16:55:05.050 に答える