Question

我有两列并排浮动-左列有背景图像，右列有一些文本。右列有一个按钮，单击该按钮可显示更多文本。页面加载后，背景图像将达到预期的全高，但是，单击右侧的按钮时，图像不会调整大小，并且在底部显示空白。我该怎么做才能使左侧的图像始终保持全高？

以下代码：

$(document).ready(function() {
     $("#show_hide").click(function () {
     $("#toggle_tst").toggle()
  });
  });

.left {
  width:50%;
  float:left;
  background:grey;
  height:100vh;
  background-image:url(https://coolbackgrounds.io/images/backgrounds/index/sea-edge-79ab30e2.png);
}

.right {
  width:50%;
  float:right;
  min-height: 100vh;
}

#toggle_tst {
  display:none;
  }

.more {
height: 500px;
display: block;
clear:both;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="left">

</div>
<div class="right">

Some text here

<button id="show_hide">Show/Hide div</button> 
   <div id="toggle_tst">
     The div element with some text.
     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Fringilla est ullamcorper eget nulla facilisi etiam dignissim diam quis. Faucibus scelerisque eleifend donec pretium vulputate sapien nec sagittis. Dignissim cras tincidunt lobortis feugiat vivamus at augue eget arcu. Aliquam purus sit amet luctus venenatis lectus magna fringilla urna. Elit sed vulputate mi sit. Duis ultricies lacus sed turpis tincidunt id aliquet risus feugiat. Iaculis urna id volutpat lacus laoreet non curabitur gravida. Duis at tellus at urna condimentum mattis pellentesque id. Aliquam sem et tortor consequat id porta nibh. Purus ut faucibus pulvinar elementum. Accumsan tortor posuere ac ut consequat. Quis lectus nulla at volutpat diam ut venenatis tellus. Eu sem integer vitae justo eget magna. Lorem mollis aliquam ut porttitor.

Nulla pellentesque dignissim enim sit amet venenatis urna. Maecenas ultricies mi eget mauris pharetra et ultrices. Vitae nunc sed velit dignissim sodales. Lorem sed risus ultricies tristique. A lacus vestibulum sed arcu. Tellus mauris a diam maecenas sed enim ut. Neque ornare aenean euismod elementum. Lacus luctus accumsan tortor posuere. Risus nec feugiat in fermentum posuere urna nec tincidunt praesent. Imperdiet massa tincidunt nunc pulvinar sapien et ligula. Quis viverra nibh cras pulvinar mattis nunc sed blandit libero. Viverra tellus in hac habitasse platea dictumst vestibulum rhoncus. Sed blandit libero volutpat sed cras ornare arcu dui vivamus. Odio eu feugiat pretium nibh. Nunc sed augue lacus viverra vitae. Eu lobortis elementum nibh tellus molestie nunc non blandit massa. Varius vel pharetra vel turpis nunc eget lorem dolor sed. Sed vulputate mi sit amet mauris commodo quis imperdiet massa.

Duis at tellus at urna condimentum mattis pellentesque id. Nisl vel pretium lectus quam id leo. Sed arcu non odio euismod lacinia at. Ac tortor dignissim convallis aenean et tortor at risus. Sem viverra aliquet eget sit amet tellus. Dignissim enim sit amet venenatis urna. Nunc consequat interdum varius sit amet mattis. Euismod quis viverra nibh cras pulvinar mattis nunc sed. Volutpat est velit egestas dui id ornare arcu odio ut. Curabitur gravida arcu ac tortor dignissim convallis aenean et tortor.

Mus mauris vitae ultricies leo integer malesuada. Massa placerat duis ultricies lacus sed turpis tincidunt id aliquet. Eget nunc lobortis mattis aliquam faucibus purus in. Ultrices mi tempus imperdiet nulla malesuada pellentesque elit. Sit amet mattis vulputate enim nulla aliquet porttitor lacus luctus. Porta nibh venenatis cras sed. Posuere sollicitudin aliquam ultrices sagittis orci a scelerisque purus. Maecenas volutpat blandit aliquam etiam. Vitae tempus quam pellentesque nec. Enim sed faucibus turpis in eu mi. Accumsan sit amet nulla facilisi morbi tempus iaculis urna id. Vel elit scelerisque mauris pellentesque pulvinar pellentesque. Vitae proin sagittis nisl rhoncus mattis rhoncus urna neque viverra.

Odio aenean sed adipiscing diam donec adipiscing tristique risus. Tempor nec feugiat nisl pretium fusce id. Velit dignissim sodales ut eu sem integer. Et netus et malesuada fames. A arcu cursus vitae congue. Egestas dui id ornare arcu odio ut sem nulla pharetra. Eget gravida cum sociis natoque penatibus. Mollis nunc sed id semper risus in hendrerit. Ultricies mi eget mauris pharetra et ultrices neque ornare. Magna etiam tempor orci eu lobortis elementum. Et netus et malesuada fames ac turpis. Lobortis feugiat vivamus at augue eget. Cras semper auctor neque vitae tempus quam pellentesque nec nam.
     
     
   </div>

</div>

<div class="more">
Another section would go here
</div>

Answer 1

由于.left未扩展，因此背景图像未扩展。您可以创建一个父级flex，以便孩子长大以匹配其身高。

此外，您需要将height: 100vh更改为min-height: 100vh，如果没有，它的扩展范围不会超过此。

$(document).ready(function() {
  $("#show_hide").click(function() {
    $("#toggle_tst").toggle()
  });
});

.wrapper {
    display: flex;
    flex-direction: row;
}

.left {
  width: 50%;
  float: left;
  background: grey;
  min-height: 100vh;
  background-image: url(https://coolbackgrounds.io/images/backgrounds/index/sea-edge-79ab30e2.png);
}

.right {
  width: 50%;
  float: right;
  min-height: 100vh;
}

#toggle_tst {
  display: none;
}

.more {
  height: 500px;
  display: block;
  clear: both;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="left">

  </div>
  <div class="right">

    Some text here

    <button id="show_hide">Show/Hide div</button>
    <div id="toggle_tst">
      The div element with some text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Fringilla est ullamcorper eget nulla facilisi etiam dignissim diam quis. Faucibus scelerisque eleifend
      donec pretium vulputate sapien nec sagittis. Dignissim cras tincidunt lobortis feugiat vivamus at augue eget arcu. Aliquam purus sit amet luctus venenatis lectus magna fringilla urna. Elit sed vulputate mi sit. Duis ultricies lacus sed turpis tincidunt
      id aliquet risus feugiat. Iaculis urna id volutpat lacus laoreet non curabitur gravida. Duis at tellus at urna condimentum mattis pellentesque id. Aliquam sem et tortor consequat id porta nibh. Purus ut faucibus pulvinar elementum. Accumsan tortor
      posuere ac ut consequat. Quis lectus nulla at volutpat diam ut venenatis tellus. Eu sem integer vitae justo eget magna. Lorem mollis aliquam ut porttitor. Nulla pellentesque dignissim enim sit amet venenatis urna. Maecenas ultricies mi eget mauris
      pharetra et ultrices. Vitae nunc sed velit dignissim sodales. Lorem sed risus ultricies tristique. A lacus vestibulum sed arcu. Tellus mauris a diam maecenas sed enim ut. Neque ornare aenean euismod elementum. Lacus luctus accumsan tortor posuere.
      Risus nec feugiat in fermentum posuere urna nec tincidunt praesent. Imperdiet massa tincidunt nunc pulvinar sapien et ligula. Quis viverra nibh cras pulvinar mattis nunc sed blandit libero. Viverra tellus in hac habitasse platea dictumst vestibulum
      rhoncus. Sed blandit libero volutpat sed cras ornare arcu dui vivamus. Odio eu feugiat pretium nibh. Nunc sed augue lacus viverra vitae. Eu lobortis elementum nibh tellus molestie nunc non blandit massa. Varius vel pharetra vel turpis nunc eget
      lorem dolor sed. Sed vulputate mi sit amet mauris commodo quis imperdiet massa. Duis at tellus at urna condimentum mattis pellentesque id. Nisl vel pretium lectus quam id leo. Sed arcu non odio euismod lacinia at. Ac tortor dignissim convallis aenean
      et tortor at risus. Sem viverra aliquet eget sit amet tellus. Dignissim enim sit amet venenatis urna. Nunc consequat interdum varius sit amet mattis. Euismod quis viverra nibh cras pulvinar mattis nunc sed. Volutpat est velit egestas dui id ornare
      arcu odio ut. Curabitur gravida arcu ac tortor dignissim convallis aenean et tortor. Mus mauris vitae ultricies leo integer malesuada. Massa placerat duis ultricies lacus sed turpis tincidunt id aliquet. Eget nunc lobortis mattis aliquam faucibus
      purus in. Ultrices mi tempus imperdiet nulla malesuada pellentesque elit. Sit amet mattis vulputate enim nulla aliquet porttitor lacus luctus. Porta nibh venenatis cras sed. Posuere sollicitudin aliquam ultrices sagittis orci a scelerisque purus.
      Maecenas volutpat blandit aliquam etiam. Vitae tempus quam pellentesque nec. Enim sed faucibus turpis in eu mi. Accumsan sit amet nulla facilisi morbi tempus iaculis urna id. Vel elit scelerisque mauris pellentesque pulvinar pellentesque. Vitae
      proin sagittis nisl rhoncus mattis rhoncus urna neque viverra. Odio aenean sed adipiscing diam donec adipiscing tristique risus. Tempor nec feugiat nisl pretium fusce id. Velit dignissim sodales ut eu sem integer. Et netus et malesuada fames. A
      arcu cursus vitae congue. Egestas dui id ornare arcu odio ut sem nulla pharetra. Eget gravida cum sociis natoque penatibus. Mollis nunc sed id semper risus in hendrerit. Ultricies mi eget mauris pharetra et ultrices neque ornare. Magna etiam tempor
      orci eu lobortis elementum. Et netus et malesuada fames ac turpis. Lobortis feugiat vivamus at augue eget. Cras semper auctor neque vitae tempus quam pellentesque nec nam.


    </div>

  </div>
</div>

<div class="more">
  Another section would go here
</div>

当页面大小增加时，背景图像不会扩展

1 个答案: