Question

我在三个div的相对位置有一个包装器。我想将其中两个用作背景，一个在左侧，另一个在右侧（我使用materializecss网格）。

第三个div处于绝对位置，我想用它来显示悬停在前两个div上的内容。

我希望背景颜色为空的div与具有内容的绝对div的高度相同。

我尝试为前两个div赋予arr1 = [10,9,8,9,6,1,2,4,3,2,5,5,3] Test.assert_equals(find_dups_miss(arr1),[7, [2, 3, 5, 9]])，但我希望此div能够适合整个页面（不仅是可见部分），即使第三div中的内容比视口更长。

有人知道该怎么做吗？我需要Javascript吗？

height:100vh;

.wrapper {
  position: relative;
}

.col.s8.leftside {
  background: #E3B2B0;
  height: 100vh;
}

.col.s4.rightside {
  background: #D27156;
  height: 100vh;
}

.article {
  position: absolute;
}

Answer 1

我找到了一个使用背景的绝对位置和z-index的解决方案。

.col.s8.leftside {
    background: #E3B2B0;
    position: absolute;
    height:100%;
    width: 100%;
    z-index: -1;
}

.col.s4.rightside {
    position: absolute;
    background: #D27156;
    height:100%;
    width: 60%;
    z-index: -1;
}

<!-- Leftside background -->
<div class="col s8 leftside">
</div>
<!-- Rightside background -->
<div class="col s4 rightside">
</div>
<!-- Article -->
<div class="col s6 offset-s3 article">
  <a href="<?php echo $page->permalink(); ?>">
    <h4 id="pageTitle" class="white-text">
      <?php echo $page->title(); ?>
    </h4>
  </a>
  <?php if ($page->coverImage()) : ?>
  <img src="<?php echo $page->coverImage(); ?>" />
  <?php endif ?>
  <!-- Full content -->
  <?php echo $page->content(); ?>
</div>

Answer 2

如果您要结帐，这是我的解决方法：https://jsfiddle.net/loicelthesea/qzb9fo5t/

我在包装器内使用2 div：一个用于文章，一个用于两个背景（article__bg）。 article__bg设置为绝对值，并且z-index为负数。我在文章和article__bg中添加了.row类，以使其可与jsfiddle中的materializecss网格一起使用。

CSS：

.wrapper {
  position: relative;
}

.article {
}

.article__bg {
  height: 100%;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -1;
}

.article__bg__leftside {
  background: #d27156;
  height: 100%;
}
.article__bg__rightside {
  background: #e3b2b0;
  height: 100%;
}

<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <title></title>

</head>

<body>
    <div class="wrapper">

        <div class="row article">
            <!-- Article -->
            <div class="col s6 offset-s3">
                <a href="">
                    <h4>FIRST TEST</h4>
                </a>

                <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam lacinia sed augue in imperdiet. Phasellus tristique velit nec suscipit egestas. Morbi tristique nisl vitae dolor porta pulvinar. Maecenas at ante sit amet massa maximus
                    sagittis eget dictum sem. Sed porta blandit mauris vel vestibulum. Sed consequat sed turpis dapibus iaculis. Praesent venenatis felis tincidunt dictum sollicitudin. Donec egestas vulputate aliquam. Donec eu lacus vehicula ipsum
                    tincidunt dictum. Donec tincidunt iaculis metus non ornare. Nulla at neque semper, interdum est eu, tincidunt nunc. Maecenas dapibus, magna eget tincidunt venenatis, mi odio blandit leo, quis varius sapien ex et mauris. </p>
                <p> Integer augue dui, imperdiet vitae eleifend in, porta et urna. Duis ut pellentesque libero, nec consectetur massa. Donec in eros id arcu scelerisque interdum lacinia hendrerit erat. Praesent eget euismod erat. Praesent viverra placerat
                    neque, sit amet auctor orci tincidunt in. Nam fermentum mauris eu magna maximus, luctus pellentesque arcu blandit. Integer fermentum vestibulum lorem a convallis. Cras maximus erat vel massa dignissim molestie. Nulla sit amet nibh
                    diam. Maecenas mauris dui, iaculis ut nisl sed, hendrerit blandit neque. Maecenas augue eros, posuere id erat a, scelerisque porttitor nisl. Nulla a ex sit amet massa pretium placerat eu sed ipsum. Aenean blandit id dui ut volutpat.
                </p>
                <p> Cras sit amet malesuada justo. Ut suscipit, quam eget rutrum sodales, nunc elit vestibulum risus, eu iaculis augue metus accumsan sem. Mauris aliquam, elit at tristique luctus, enim arcu rhoncus sem, eu euismod eros odio non tortor.
                    Quisque eleifend consectetur magna, nec aliquet quam scelerisque vitae. Integer porttitor eros vulputate, vehicula ante non, tincidunt sem. Sed rutrum tempor pulvinar. Duis lacinia tincidunt nisi nec tincidunt. Nullam consequat
                    nulla nibh, et bibendum odio imperdiet imperdiet. </p>
                <p> Suspendisse sollicitudin mi sed orci tristique porta. Aenean purus sapien, ultricies sit amet cursus quis, hendrerit sit amet neque. Sed sit amet sem maximus, scelerisque urna a, posuere augue. Donec varius libero et mi commodo, non
                    faucibus metus venenatis. Nullam dapibus aliquam lorem eu tincidunt. Sed sit amet varius tortor. Pellentesque diam ante, dictum quis ex in, pulvinar placerat libero. Aenean nulla sem, congue et elementum eu, dapibus et ligula.
                    Duis sed elit hendrerit, eleifend nunc in, imperdiet ex. Sed eu lectus tortor. Nunc quis dolor at orci luctus ullamcorper. Mauris rutrum dolor et turpis vehicula pulvinar. Orci varius natoque penatibus et magnis dis parturient
                    montes, nascetur ridiculus mus. Pellentesque aliquet, lectus at rutrum efficitur, nisi velit rutrum lacus, vitae lobortis augue ex consequat urna. </p>

                <p> Praesent eu iaculis neque, non dapibus est. Phasellus dignissim venenatis consequat. Phasellus urna justo, euismod ut facilisis sed, semper at augue. Maecenas lacinia placerat mattis. Mauris vel venenatis felis. Sed volutpat libero
                    ut odio rutrum viverra. Pellentesque tempor nunc sit amet massa porta lobortis. Praesent feugiat bibendum sapien. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur vel augue vitae
                    quam volutpat dignissim. Sed scelerisque porta erat at sagittis. Integer accumsan velit vel diam luctus, nec pretium justo vestibulum. </p>
            </div>
        </div>
        <!-- article -->

        <div class="row article__bg">
            <!-- Leftside background -->
            <div class="col s8 article__bg__leftside">
            </div>

            <!-- Rightside background -->
            <div class="col s4 article__bg__rightside">
            </div>
        </div>

    </div>
    <!-- wrapper -->

</body>

使空div的绝对内容高度相同

2 个答案: