代码之家  ›  专栏  ›  技术社区  ›  desbest

如何使具有相同父级的两个重叠行元素在CSS中具有相同的高度,其中z索引不同?

  •  0
  • desbest  · 技术社区  · 4 年前

    我正在寻找与左,右的背景div,填补了它的容器的高度或是另一个div容器包含的高度(洋红色的一个)。

    下面是一张图片。

    resurrected clean layout problem

    Here is a JS Fiddle with my working code with a preview.

    <div class="outercontainer">
                
                <div class="innercontainerback orangeborder"></div>
    
                <div class="innercontainer padding1 magenta">
                        
    
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam convallis id tellus vitae ultrices. Phasellus elit leo, vulputate et malesuada ac, venenatis vel augue. Mauris maximus ex ac orci blandit auctor. Praesent lectus dolor, pretium vitae ultricies vel, accumsan a ante. Fusce blandit semper suscipit. Vivamus ultricies ipsum et finibus malesuada. Aliquam tempor, tellus in bibendum fringilla, nunc lacus posuere sem, nec elementum enim eros a massa. Maecenas eleifend elementum nisi accumsan luctus. Aenean ac tortor mollis, aliquam magna vel, aliquet sapien. Fusce purus quam, pulvinar quis enim nec, ornare luctus felis. Aliquam consectetur dapibus dictum. Morbi et ex eu risus euismod viverra sit amet sit amet augue. Nam mollis hendrerit tincidunt. Sed posuere suscipit ipsum id sagittis. Mauris quis sapien vitae mi tristique accumsan. Praesent cursus dui vehicula leo viverra venenatis.
    
                </div>
    
                
                
    
        </div>
    

    下面是我的CSS

    html, body, .outercontainer, .innercontainerback { height: 100%; min-height: 100%; }
    
    body {
        margin: 0px;
        padding: 0px;
        font-family: Tahoma;
    }
    
    .outercontainer {
        width: 100%;
    }
    
    .innercontainerback, .innercontainer { width: 400px; }
    
    .magenta { background-color: magenta; }
    .orangeborder { border: 5px solid orange; }
    
    
    .innercontainerback {
        /*margin-left: auto; margin-right: auto;*/
        background-image: url('https://i.imgur.com/vvaALIn.png'), url('https://i.imgur.com/trZrIdu.png');
        background-position: left, right;
        background-repeat: repeat-y, repeat-y;
        opacity: 0.88;
        z-index: 1; position: absolute; 
      /* left: 50%;  margin-left: -400px;  */
     top: 0px;
    }
    
    .innercontainer {
        /* height: 100%; */
     min-height: 100%; 
    /*  margin-left: auto;
        margin-right: auto; */
        opacity: 1 !important;
        position: relative; z-index: 0;
        clear: both;
    }
    
    .padding1 { 
        padding-left: 90px; padding-right: 90px; box-sizing: border-box;
        padding-top: 32px;
        /*margin-top: 32px; */
    }
    

    如何使具有相同父级的两个重叠元素在CSS中具有相同的高度,其中两个div都不是列,并且z索引不同?

    0 回复  |  直到 4 年前
        1
  •  1
  •   Temani Afif    4 年前

    删除 height: 100% position:relative

    html,
    body,
    .innercontainerback {
      height: 100%;
      min-height: 100%;
    }
    
    body {
      margin: 0px;
      padding: 0px;
      font-family: Tahoma;
    }
    
    .outercontainer {
      min-height: 100%;
      position: relative;
    }
    
    .innercontainerback,
    .innercontainer {
      width: 400px;
    }
    
    .magenta {
      background-color: magenta;
    }
    
    .orange {
      background-color: orange;
    }
    
    .innercontainerback {
      background-image: url('https://i.imgur.com/vvaALIn.png'), url('https://i.imgur.com/trZrIdu.png');
      background-position: left, right;
      background-repeat: repeat-y, repeat-y;
      opacity: 0.88;
      z-index: 1;
      position: absolute;
      top: 0px;
    }
    
    .innercontainer {
      min-height: 100%;
      opacity: 1 !important;
      position: relative;
      z-index: 0;
      clear: both;
    }
    
    .padding1 {
      padding-left: 90px;
      padding-right: 90px;
      box-sizing: border-box;
      padding-top: 32px;
    }
    <div class="outercontainer">
    
      <div class="innercontainerback orange"></div>
    
      <div class="innercontainer padding1 magenta">
    
    
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam convallis id tellus vitae ultrices. Phasellus elit leo, vulputate et malesuada ac, venenatis vel augue. Mauris maximus ex ac orci blandit auctor. Praesent lectus dolor, pretium vitae ultricies
        vel, accumsan a ante. Fusce blandit semper suscipit. Vivamus ultricies ipsum et finibus malesuada. Aliquam tempor, tellus in bibendum fringilla, nunc lacus posuere sem, nec elementum enim eros a massa. Maecenas eleifend elementum nisi accumsan luctus.
        Aenean ac tortor mollis, aliquam magna vel, aliquet sapien. Fusce purus quam, pulvinar quis enim nec, ornare luctus felis. Aliquam consectetur dapibus dictum. Morbi et ex eu risus euismod viverra sit amet sit amet augue. Nam mollis hendrerit tincidunt.
        Sed posuere suscipit ipsum id sagittis. Mauris quis sapien vitae mi tristique accumsan. Praesent cursus dui vehicula leo viverra venenatis. Donec gravida lorem in quam lobortis iaculis. Mauris in feugiat turpis, ut mollis odio. Duis tincidunt massa
        malesuada, suscipit orci et, laoreet odio. In ultrices vel metus eget varius. Vivamus quis libero eu lacus mattis varius. Vestibulum venenatis nisl at ligula gravida iaculis. Vestibulum metus diam, laoreet non mi et, euismod tempor dui. Integer eu
        sapien ut lectus sodales cursus. In nisi nunc, faucibus feugiat velit non, molestie faucibus odio. Curabitur pretium accumsan turpis consectetur gravida. Suspendisse viverra enim a est egestas, vel lobortis augue cursus. Vivamus dignissim porta varius.
        Mauris gravida id augue eget convallis. Nam id dui nec arcu dapibus congue. Sed imperdiet facilisis elementum. Nam sed magna in massa finibus viverra ac vel tortor. Morbi iaculis sollicitudin dolor vulputate luctus. Donec efficitur arcu at mauris
        euismod, sit amet fermentum enim elementum. Praesent sapien sem, fringilla quis elementum a, auctor nec elit. Nunc sed justo non diam efficitur elementum. Aliquam sit amet turpis augue. Quisque ullamcorper nunc in facilisis lacinia. Mauris molestie
        nibh ipsum, vitae malesuada neque blandit pharetra. Nunc viverra convallis odio pretium dictum. Sed imperdiet massa ac libero scelerisque, eget rutrum lorem accumsan. In ac lobortis nibh. Ut id risus id ante aliquet dictum lobortis eu velit. Curabitur
        vitae risus bibendum, condimentum purus et, porta lectus. Nullam non nulla quis urna tincidunt auctor sed a leo.
      </div>
    
    
    
    
    </div>

    或者使用伪元素简化代码,如果 vh 避免所有级联 height / min-height

    body {
      margin: 0px;
      padding: 0px;
      font-family: Tahoma;
    }
    
    .outercontainer {
      min-height: 100vh;
      display:flex;
      width: 400px;
    }
    
    .magenta {
      background-color: magenta;
    }
    
    .innercontainer::before {
      content:"";
      background-image: url('https://i.imgur.com/vvaALIn.png'), url('https://i.imgur.com/trZrIdu.png');
      background-position: left, right;
      background-repeat: repeat-y;
      background-color: orange;
      opacity: 0.88;
      z-index: 1;
      position: absolute;
      top: 0;
      left:0;
      right:0;
      bottom:0;
    }
    
    .innercontainer {
      position: relative;
    }
    
    .padding1 {
      padding-left: 90px;
      padding-right: 90px;
      box-sizing: border-box;
      padding-top: 32px;
    }
    <div class="outercontainer">
    
      <div class="innercontainer padding1 magenta">
    
    
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam convallis id tellus vitae ultrices. Phasellus elit leo, vulputate et malesuada ac, venenatis vel augue. Mauris maximus ex ac orci blandit auctor. Praesent lectus dolor, pretium vitae ultricies
        vel, accumsan a ante. Fusce blandit semper suscipit. Vivamus ultricies ipsum et finibus malesuada. Aliquam tempor, tellus in bibendum fringilla, nunc lacus posuere sem, nec elementum enim eros a massa. Maecenas eleifend elementum nisi accumsan luctus.
        Aenean ac tortor mollis, aliquam magna vel, aliquet sapien. Fusce purus quam, pulvinar quis enim nec, ornare luctus felis. Aliquam consectetur dapibus dictum. Morbi et ex eu risus euismod viverra sit amet sit amet augue. Nam mollis hendrerit tincidunt.
        Sed posuere suscipit ipsum id sagittis. Mauris quis sapien vitae mi tristique accumsan. Praesent cursus dui vehicula leo viverra venenatis. Donec gravida lorem in quam lobortis iaculis. Mauris in feugiat turpis, ut mollis odio. Duis tincidunt massa
        malesuada, suscipit orci et, laoreet odio. In ultrices vel metus eget varius. Vivamus quis libero eu lacus mattis varius. Vestibulum venenatis nisl at ligula gravida iaculis. Vestibulum metus diam, laoreet non mi et, euismod tempor dui. Integer eu
        sapien ut lectus sodales cursus. In nisi nunc, faucibus feugiat velit non, molestie faucibus odio. Curabitur pretium accumsan turpis consectetur gravida. Suspendisse viverra enim a est egestas, vel lobortis augue cursus. Vivamus dignissim porta varius.
        Mauris gravida id augue eget convallis. Nam id dui nec arcu dapibus congue. Sed imperdiet facilisis elementum. Nam sed magna in massa finibus viverra ac vel tortor. Morbi iaculis sollicitudin dolor vulputate luctus. Donec efficitur arcu at mauris
        euismod, sit amet fermentum enim elementum. Praesent sapien sem, fringilla quis elementum a, auctor nec elit. Nunc sed justo non diam efficitur elementum. Aliquam sit amet turpis augue. Quisque ullamcorper nunc in facilisis lacinia. Mauris molestie
        nibh ipsum, vitae malesuada neque blandit pharetra. Nunc viverra convallis odio pretium dictum. Sed imperdiet massa ac libero scelerisque, eget rutrum lorem accumsan. In ac lobortis nibh. Ut id risus id ante aliquet dictum lobortis eu velit. Curabitur
        vitae risus bibendum, condimentum purus et, porta lectus. Nullam non nulla quis urna tincidunt auctor sed a leo.
      </div>
    
    
    
    
    </div>