CSS/HTML Divサイズ変更とテーブルの配置

Question

私は3つのdiv、親div、上の子div、下の別のdivがあります。助けが非常に高く評価され、ここで私が達成したいものがあります：

トップのdivがサイズを変更/増加すると、テーブルを含む下のdivは縮小しますが、その位置にとどまります。あなたがそれをはっきりと視覚化できるように、下のモックアップを見てください。 https://jsfiddle.net/koykoys/t09v854r/8/

$("#btnExpand").click(function(){ 
 
    $(#top).css("height","400px"); 
 
});

.wrapper{ 
 
    height: 73vh; 
 
    display: flex; 
 
    flex-direction: column; 
 
    border: 2px solid red; 
 
} 
 

 
#top{ 
 
    border:2px solid blue; 
 
    position:relative; 
 
    height:100px 
 
} 
 

 
#bottom{ 
 
    border:2px solid green; 
 
    position:relative; 
 
    height:100%" 
 
} 
 
table, th, td { 
 
    border: 1px solid black; 
 
}

<div class="wrapper"> 
 
    <div id "expand"> 
 
    <input id = "btnExpand" type="button" value="Expand Blue Div"/> 
 
    </div> 
 
    <div id="top"></div> 
 
    </br> 
 
    <div id "Download CSV"> 
 
    <button > 
 
     Download CSV of Table 
 
    </button> 
 
    </div> 
 
    <div id="bottom" style="border:2px solid green;position:relative;height:100%" > 
 
    <table> 
 
     <tr> 
 
     <th>Firstname</th> 
 
     <th>Lastname</th> 
 
     <th>Firstname</th> 
 
     <th>Lastname</th> 
 
     <th>Firstname</th> 
 
     <th>Lastname</th> 
 
     <th>Firstname</th> 
 
     </tr> 
 
     <tr> 
 
     <td>John</td> 
 
     <td>Jaranjan</td> 
 
     <td>John</td> 
 
     <td>Jaranjan</td> 
 
     <td>John</td> 
 
     <td>Jaranjan</td> 
 
     <td>John</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Boom</td> 
 
     <td>Panes</td> <td>John</td> 
 
     <td>Jaranjan</td> 
 
     <td>John</td> 
 
     <td>Jaranjan</td> 
 
     <td>John</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Boom</td> 
 
     <td>Panes</td> <td>John</td> 
 
     <td>Jaranjan</td> 
 
     <td>John</td> 
 
     <td>Jaranjan</td> 
 
     <td>John</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Boom</td> 
 
     <td>Panes</td> <td>John</td> 
 
     <td>Jaranjan</td> 
 
     <td>John</td> 
 
     <td>Jaranjan</td> 
 
     <td>John</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Boom</td> 
 
     <td>Panes</td> <td>John</td> 
 
     <td>Jaranjan</td> 
 
     <td>John</td> 
 
     <td>Jaranjan</td> 
 
     <td>John</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Boom</td> 
 
     <td>Panes</td> <td>John</td> 
 
     <td>Jaranjan</td> 
 
     <td>John</td> 
 
     <td>Jaranjan</td> 
 
     <td>John</td> 
 
     </tr> 
 
    </table> 
 
    </div> 
 
</div>

Answer 1

wrapper heightをautoに設定してください。

$(document).ready(function(){ 
 
$("#btnExpand").click(function(){ 
 
     $('#top').animate({ 
 
     'height' : '400px' 
 
     }); 
 
    }); 
 
});

.wrapper{ 
 
    width:100%; 
 
    height: auto; 
 
    display: flex; 
 
    flex-direction: column; 
 
    border: 2px solid red; 
 
} 
 

 
#top{ 
 
    border:2px solid blue; 
 
    position:relative; 
 
    height:100px; 
 
} 
 
#bottom{ 
 
    border:2px solid green; 
 
    position:relative; 
 
    height:100%" 
 
} 
 
table, th, td { 
 
    border: 1px solid black; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="wrapper"> 
 
<div id = "expand"> 
 
    <input id = "btnExpand" type="button" value="Expand Blue Div"/> 
 
    </div> 
 
    <div id="top" > 
 
    </div> 
 
    </br> 
 
    <div id = "Download CSV"> 
 
     <button > 
 
     Download CSV of Table 
 
     </button> 
 
    </div> 
 
    <div id="bottom" style="border:2px solid green;position:relative;height:100%" > 
 
    <table> 
 
    <tr> 
 
    <th>Firstname</th> 
 
    <th>Lastname</th> 
 
    <th>Firstname</th> 
 
    <th>Lastname</th> 
 
    <th>Firstname</th> 
 
    <th>Lastname</th> 
 
    <th>Firstname</th> 
 

 
    </tr> 
 
    <tr> 
 
    <td>John</td> 
 
    <td>Jaranjan</td> 
 
    <td>John</td> 
 
    <td>Jaranjan</td> 
 
    <td>John</td> 
 
    <td>Jaranjan</td> 
 
    <td>John</td> 
 

 
    </tr> 
 
    <tr> 
 
    <td>Boom</td> 
 
    <td>Panes</td> <td>John</td> 
 
    <td>Jaranjan</td> 
 
    <td>John</td> 
 
    <td>Jaranjan</td> 
 
    <td>John</td> 
 

 

 
    </tr> 
 
    <tr> 
 
    <td>Boom</td> 
 
    <td>Panes</td> <td>John</td> 
 
    <td>Jaranjan</td> 
 
    <td>John</td> 
 
    <td>Jaranjan</td> 
 
    <td>John</td> 
 

 

 
    </tr> 
 
    <tr> 
 
    <td>Boom</td> 
 
    <td>Panes</td> <td>John</td> 
 
    <td>Jaranjan</td> 
 
    <td>John</td> 
 
    <td>Jaranjan</td> 
 
    <td>John</td> 
 

 

 
    </tr> 
 
    <tr> 
 
    <td>Boom</td> 
 
    <td>Panes</td> <td>John</td> 
 
    <td>Jaranjan</td> 
 
    <td>John</td> 
 
    <td>Jaranjan</td> 
 
    <td>John</td> 
 

 

 
    </tr> 
 
    <tr> 
 
    <td>Boom</td> 
 
    <td>Panes</td> <td>John</td> 
 
    <td>Jaranjan</td> 
 
    <td>John</td> 
 
    <td>Jaranjan</td> 
 
    <td>John</td> 
 

 

 
    </tr> 
 

 

 
    
 
</table> 
 

 
     
 
    </div>

Answer 2

は、ここでは、あなたのHTMLマークアップでエラーが発生したhttps://jsfiddle.net/whp257jp/

を働く新しいJSのフィドルです：

Here is my Mock Up Image

は、ここに私のJSFiddleです。それを私が直した。

<div class="wrapper"> 
<div id="expand"> 
    <input id="btnExpand" type="button" value="Expand Blue Div"/> 
    </div> 
    <div id="top" > 
    </div> 
    <br/> 

のjQuery：

$("#btnExpand").click(function(){ 
    $('#top').css("height","400px"); 
}); 

それはあなたの仕事のための完全なソリューションではありません。私はちょうどあなたのコードを作った。

私が初心者としてはかなり難しい仕事です。 Uはこの問題を解決するためにcss、html、jQueryをより深く学ぶ必要があります。

Answer 3

wrapper高さが自動でなければなりません：

.wrapper{ 
    height: auto; 
    display: flex; 
    flex-direction: column; 
    border: 2px solid red; 
} 

そして、あなたは二重引用符を忘れてしまった：

$("#top").height("400px");