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

javascript html css html5 html-table

92 просмотра

3 ответа

77 Репутация автора

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

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

Вот мой макет изображения

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

Автор: Rocky Источник Размещён: 19.07.2016 07:04

Ответы (3)


0 плюса

359 Репутация автора

Вот новая js fiddle, которая работает 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");
}); 

Это не полное решение для вашей задачи. Я только что заставил твой код работать.

Задача, которую вы дали довольно сложно для вас, как для новичка. Вам нужно изучить css, html и jQuery более глубоко, чтобы решить эту задачу.

Автор: Alexander Seredenko Размещён: 19.07.2016 08:48

1 плюс

7302 Репутация автора

Решение

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

Автор: frnt Размещён: 19.07.2016 08:57

0 плюса

1911 Репутация автора

wrapperвысота должна быть автоматической :

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

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

$("#top").height("400px");
Автор: stig-js Размещён: 19.07.2016 09:06
Вопросы из категории :
32x32