2つの子、1つは下部に、もう1つは残っているスペースを埋め込む、サイズ変更可能な可動div。

これは、div内に2つのdivがあり、ドラッグ可能でサイズ変更可能です。 reddivは常に親divの一番下にあるはずで、bluedivは親divの残りの領域を占有するはずです。2つの子、1つは下部に、もう1つは残っているスペースを埋め込む、サイズ変更可能な可動div。

チャットボックスのように考えてください。ここでは、bluedivはメッセージが表示される場所で、下のdiv（reddiv）は入力と送信ボタンになります。

問題reddivを底に留めることができません。私は固定された位置でそれを行うことができますが、それはページの下部（親divの外側）になります。

とにかく、このように見えるとします。 plan 1

#draggable { 
    top: 0px; 
    left: 0px; 
    z-index:1000; 
    position:absolute; 
    width: 256px; 
    height: 256px; 
    border-style: solid; 
    border-color: #000000; 
} 

#bluediv { 
    border-style: solid; 
    border-color: #0000FF; 
    width:100%; 
    height:100%; 
} 

#reddiv { 
    bottom: 0; 
    height:50px; 
    width:100%; 
    border-style: solid; 
    border-color: #ff0000; 
}

https://jsfiddle.net/g8bmc04x/24/

出典

2016-06-16 Brandan Tyler Lasley

あなたはそれがこのようになります持っているランダムなdiv要素を取り除きます。フィドルの作業

<body> 
    <p> Heres some random text it should float over</p> 
    <div id="draggable" class="ui-widget-content"> 
     <!-- Suppose to fill the remaining space the bottom div doesn't use --> 
     <div id="bluediv">Things</div> 
     <!-- Suppose to be on the bottom, like a chatbox message input --> 
     <div id="reddiv">And Stuff</div> 
    </div> 
</body>

：このの助けを借りて、まあhttps://jsfiddle.net/1LaLd8r3/

出典

2016-06-16 01:25:50

と絶対にreddivを変更し、それが正しく動作するようになりました。 https://jsfiddle.net/1LaLd8r3/11/ –

2つの子、1つは下部に、もう1つは残っているスペースを埋め込む、サイズ変更可能な可動div。

答えて

関連する問題