Как способствование тому, чтобы div покрыл Вашего отца

Я хочу, чтобы один div#cover покрыл Вашего отца

<div>
    <div id="cover"></div>
    ...
</div>

Если не было более сдержанный (приостанавливающие точки: другие div's) это было бы легким:

#cover {
  height: 100%;
  width: 100%;
}

На данный момент я считаю это решенным способствуя тому, чтобы #cover он был в абсолютном положении, и распределяя ему высоту посредством javascript, а 100 % были бы всего экрана. Но мне хотелось бы использовать решение чистого CSS без Javascript, в случае, если смогут.

3
задан 17.01.2017, 15:25
0 ответов

#padre{
   width:10px;
   height:20px;
   float:left;
   position:relative;
   overflow:hidden;
   background:red;
}
 
#hijo{
   width:100%;
   height:100%;
   position:absolute;
   top:0;
   bottom:0;
   background:blue;
}
<div id="padre">
<div id="hijo">
 </div>
</div>

сын - синего цвета, покрывает все в отца. с width:100% и height:100%

у отца есть position relative, сын position absolute

3
ответ дан 03.12.2019, 17:39

Ты мог бы добиваться этого от следующей формы:

  • В элемент padre, ты распределяешь его position: relative;
  • В элемент cover, ты распределяешь его position: absolute; и потом ты можешь использовать процентное содержание, касающееся размера padre.

Так например:

function toggle() {
  var el = document.querySelector('.cover');
  el.style.display = el.style.display == 'none' ? 'block' : 'none';
}
.container {
  position: relative;
  padding: 8px;
  background-color: rgb(255, 0, 0);
}
.cover {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(255, 255, 255, .7)
}
<div class="container">
    <div class="cover"></div>
    Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. <br/>
    Fue popularizado en los 60s con la creación de las hojas "Letraset", las cuales contenian pasajes de Lorem Ipsum, y más recientemente con software de autoedición, como por ejemplo Aldus PageMaker, el cual incluye versiones de Lorem Ipsum.
</div>
<button onclick="toggle()">Mostrar/Ocultar cover</button>
3
ответ дан 03.12.2019, 17:39