Question

我有一定数量的列，当单击每列时，该列的内容如下所示。如何使可切换内容在可见时占用剩余高度，以便布局响应？是否可以仅使用css或者我是否也需要使用js？

＆＃13;

$(document).ready(function() {
  $('.column').on('click', function(e) {
    $(this).find('.content').toggle();
    $(this).toggleClass('active', 400);
  });
});

＆＃13;

#wrapper {
  width: 100%;
  margin: 0 auto;
  position: relative;
}

.content {
  position: absolute;
  width: 100%;
  color: #000;
  left: 0;
  top: auto;
  display: none;
  text-align: left;
  border: 1px solid #000;
}

.column {
  display: inline-block;
  border: 1px solid #000;
  width: 20%;
}

.column.active {
  margin-bottom: 100px;
}

.toggle {
  width: 25%;
  height: 64px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
  <div class="column">
    <div class="toggle">1</div>
    <div class="content">
      <p>content 1</p>
    </div>
  </div>

  <div class="column">
    <div class="toggle">2</div>
    <div class="content">
      <p>content 2</p>
    </div>
  </div>

  <div class="column">
    <div class="toggle">3</div>
    <div class="content">
      <p>content 3</p>
    </div>
  </div>
</div>

＆＃13;

我已经创建了fiddle到目前为止我所做的事情。

Answer 1

如果我正确理解你。你想创造一种手风琴。如果你有4个标签。并打开一个显示一些文字。如果你点击另一个它将打开那个，关闭之前的一个并保持其高度。

你需要javascript或者jsfiddle或类似的东西才能完美地运作。

所以如果这是你的问题。谷歌的东西：“如何制作手风琴菜单”。可能有办法做这个纯粹的CSS，但我不确定它。

抱歉，如果这不是你的问题

Answer 2

这是你想要的吗？

$(document).ready(function() {
  $('.column').on('click', function(e) {
    $(this).find('.content').toggle();
    $(this).toggleClass('active', 400);
  });
});

#wrapper {
  width: 100%;
  margin: 0 auto;
  position: relative;
}

.content {
  position: absolute;
  width: 100%;
  color: #000;
  left: 0;
  top: auto;
  display: none;
  text-align: left;
  border: 1px solid #000;
  height: calc(100vh - 100px);
}

.column {
  display: inline-block;
  border: 1px solid #000;
  width: 20%;
}

.column.active {
  margin-bottom: 100px;
}

.toggle {
  width: 25%;
  height: 64px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
  <div class="column">
    <div class="toggle">1</div>
    <div class="content">
      <p>content 1</p>
    </div>
  </div>

  <div class="column">
    <div class="toggle">2</div>
    <div class="content">
      <p>content 2</p>
    </div>
  </div>

  <div class="column">
    <div class="toggle">3</div>
    <div class="content">
      <p>content 3</p>
    </div>
  </div>
</div>

Answer 3

要获取可用空间，请从列的偏移量+列的高度减去窗口的高度（$（window）.height（））。
将活动列的边距底部设置为可用空间（availSpace）以向下推第二列。

修改如果你不想要＆＃34; .content＆＃34;要填充视口，只需删除var（availSpace）以查找可用空间，然后设置＆＃34; .content＆＃34;的高度。（myContent.height）到列的底部

＆＃13;
＆＃13;
$(document).ready(function(){ $('.column').on('click', function(){ $("#wrapper").find (".column").css ({"margin-bottom": 0}); $("#wrapper").find (".content").css ({"display": "none"}); var myContent = $(this).find('.content'); // var availSpace = $(window).height () - ($(this).offset ().top + $(this).height ()); myContent.addClass('active'); myContent.css ({"display": "inline-block"}); $(this).css ({"margin-bottom": myContent.height ()}); }); });
＆＃13;
#wrapper { width: 100%; margin: 0 auto; position: relative; } .content { position: absolute; width: 100%; color: #000; left: 0; top: auto; display: none; text-align: left; border: 1px solid #000; } .column { display: inline-block; border: 1px solid #000; width: 20%; } .toggle { width: 25%; height: 64px; }
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="wrapper"> <div class="column"> <div class="toggle">1</div> <div class="content"> <p>content 1</p> </div> </div> <div class="column"> <div class="toggle">2</div> <div class="content"> <p>content 2<br> content 2</p> </div> </div> <div class="column"> <div class="toggle">3</div> <div class="content"> <p>content 3</p> </div> </div> <div class="column"> <div class="toggle">4</div> <div class="content"> <p>content 4</p> </div> </div> <div class="column"> <div class="toggle">5</div> <div class="content"> <p>content 5</p> </div> </div> <div class="column"> <div class="toggle">6</div> <div class="content"> <p>content 6</p> </div> </div> <div class="column"> <div class="toggle">7</div> <div class="content"> <p>content 7</p> </div> </div> </div>
＆＃13;
＆＃13;
＆＃13;

使可切换内容占用剩余高度

3 个答案: