CSS/HTML Div Изменение размера и позиционирование таблицы

У меня есть 3 divs, родительский div, дочерний div сверху, а другой внизу. Любая помощь будет высоко оценена, вот что я хочу достичь:CSS/HTML Div Изменение размера и позиционирование таблицы

Когда верхний div изменяет размер/увеличивает его размер, нижний div, содержащий таблицу, будет уменьшаться, но останется в своем положении. См. Ниже макет, чтобы вы могли четко его визуализировать.

Here is my Mock Up Image

Вот мой JSFiddle: 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>

источник

2016-07-19 Rocky

Можете ли вы сделать jsfiddle? –

Не делайте скрипку, включите код в вопрос. Лучше по-прежнему использовать кнопку '<>' в редакторе вопросов, чтобы включить в этот вопрос фрагмент StackOverflow. Это похоже на скрипку, но в вопросе (или ответе) это сам. Посмотрите: http://stackoverflow.com/help/mcve –

Хорошо, я создам jsfiddle, вы также можете проверить мое изображение, которое я приложил, спасибо :) – Rocky

Установите 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>

источник

2016-07-19 08:57:13 frnt

Спасибо за это, но проблема в этом решении заключается в том, что оболочка меняет свой он не должен меняться независимо от высоты в 2 div внутри. – Rocky

@ReymarkMatiraPanopio Добро пожаловать. Почему вы увеличиваете высоту обертки с помощью jQuery. – frnt

Вот новый JS скрипку, которая работает https://jsfiddle.net/whp257jp/

Вы были ошибки в HTML-разметки. Я починил это.

<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 как новичок. U нужно изучить css, html и jQuery более глубоко, чтобы решить эту задачу.

источник

2016-07-19 08:48:13

Спасибо за исправление моей ошибки, да, мне еще нужно больше знаний в этом поле :) – Rocky

wrapper высота должна быть авто:

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

И вы забыли двойные кавычки:

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

источник

2016-07-19 09:06:12

спасибо, это очень полезно для меня – Rocky

Отметьте некоторые ответы как правильные, если ваши вопросы решены –

CSS/HTML Div Изменение размера и позиционирование таблицы

ответ

Смежные вопросы