Как открыть div блок на всю страницу?

#html #jquery #css

Как открыть div блок .conteiner на всю страницу,  как на данном сайте, под кодом
до вопроса "Развернуть фрагмент" ?

https://jsfiddle.net/p7cc1uys/



$("#button").click(function() {
  //alert("Проверка");
});
* {
  margin: 0px;
  padding: 0px;
}
html,
body {
  min-height: 100%;
}
body {
  background: #ddd;
}
.conteiner {
  background: #F3EFE1;
  overflow: auto;
  width: 200px;
  height: 200px;
  margin: 0 auto;
  margin-top: 40px;
  position: relative;
  -webkit-box-shadow: inset 0px 0px 9px 2px rgba(0, 0, 0, 0.32);
  -moz-box-shadow: inset 0px 0px 9px 2px rgba(0, 0, 0, 0.32);
  box-shadow: inset 0px 0px 9px 2px rgba(0, 0, 0, 0.32);
}
#button {
  float: right;
  width: 80px;
  cursor: pointer;
  text-align: center;
  padding: 4px 13px;
  border: solid 1px #004F72;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  font: 12px Verdana, Geneva, sans-serif;
  font-weight: bold;
  color: #E5FFFF;
  background-color: #3BA4C7;
  background-image: linear-gradient(top, #3BA4C7 0%, #1982A5 100%);
  -webkit-box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;
  -moz-box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;
  box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;
}


  
Развернуть




    

Ответы

Ответ 1

Еще один вариант



$(".button").click(function() {
  var parent = $(this).parents()[0]; //получаем родительський элемент
  var width = $(parent).width(); //узнаем ширину родительського блока
  
  
  $(parent).toggleClass("full"); //добавляем/убираем класс где блок во весь екран

  if(width=='200'){ //если ширина равна 200
    $(parent).children('.button').text('Свернуть'); //если истина то надпись "Свернуть"
    }
  else {
    $(parent).children('.button').text('Развернуть');//если ложь то надпись "Свернуть"
    }
});
/* блок во весь екран */
.full {  
  width: 100% !important;
  height: 100% !important;
  position: absolute !important;
  margin-top: 0px !important;
  z-index: 99999 !important;
  }


* {
  margin: 0px;
  padding: 0px;
}
html,
body {
  min-height: 100%;
}
body {
  background: #ddd;
}
.conteiner {
  background: #F3EFE1;
  overflow: auto;
  width: 200px;
  height: 200px;
  margin: 0 auto;
  margin-top: 40px;
  position: relative;
  -webkit-box-shadow: inset 0px 0px 9px 2px rgba(0, 0, 0, 0.32);
  -moz-box-shadow: inset 0px 0px 9px 2px rgba(0, 0, 0, 0.32);
  box-shadow: inset 0px 0px 9px 2px rgba(0, 0, 0, 0.32);
}
.button {
  float: right;
  width: 80px;
  cursor: pointer;
  text-align: center;
  padding: 4px 13px;
  border: solid 1px #004F72;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  font: 12px Verdana, Geneva, sans-serif;
  font-weight: bold;
  color: #E5FFFF;
  background-color: #3BA4C7;
  background-image: linear-gradient(top, #3BA4C7 0%, #1982A5 100%);
  -webkit-box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;
  -moz-box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;
  box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;
}


  
Развернуть



Ответ 2

Вроде бы так добавляем класс который открывает или делает его на 
100vw + 100vh и всё



$(document).ready(function() {
  $(".button").click(function() {
    $("pre").toggleClass("show");
    $(this).toggleClass("active");
  });
});
* {
  margin: 0;
  padding: 0;
}
html,
body {
  background: #ddd;
}
.wrapper {
  display: table;
  margin: auto;
}
pre {
  width: 540px;
  margin: 20px auto;
  height: 300px;
  background: #fefefe;
  overflow: hidden;
  overflow-y: scroll;
  padding-left: 10px;
  font-size: 12px;
}
p.button {
  display: inline;
  padding-top: 3px;
  cursor: pointer;
}
.icon-enlarge {
  padding-right: 6px;
}
p i+i {
  position: relative;
  top: -2px;
}
.show {
  width: 100vw;
  height: auto;
  font-size: 20px;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  z-index: 100;
  overflow-y: auto;
}
.active {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 101;
}
main {
  width: 80%;
  margin: auto;
}
main p {
  font-size: 20px;
  width: 90%;
  text-align: justify;
  margin: auto;
}
.text {
  position: relative;
}



  
Donec rutrum congue leo eget malesuada.
  
Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Vivamus
suscipit tortor eget felis porttitor volutpat. Proin eget tortor risus. Praesent sapien
massa, convallis a pellentesque nec, egestas non nisi. Lorem ipsum dolor sit amet,
    consectetur adipiscing elit. Mauris blandit aliquet elit, eget tincidunt nibh
pulvinar a. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Proin
eget tortor risus. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus.
    Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a.


  
  
* {
margin: 0px;
padding: 0px;
}
html,
body {
min-height: 100%;
}
body {
background: #ddd;
}
.conteiner {
background: #F3EFE1;
overflow: auto;
width: 200px;
height: 200px;
margin: 0 auto;
margin-top: 40px;
position: relative;
-webkit-box-shadow: inset 0px 0px 9px 2px rgba(0, 0, 0, 0.32);
-moz-box-shadow: inset 0px 0px 9px 2px rgba(0, 0, 0, 0.32);
box-shadow: inset 0px 0px 9px 2px rgba(0, 0, 0, 0.32);
}
#button {
float: right;
width: 80px;
cursor: pointer;
text-align: center;
padding: 4px 13px;
border: solid 1px #004F72;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
font: 12px Verdana, Geneva, sans-serif;
font-weight: bold;
color: #E5FFFF;
background-color: #3BA4C7;
background-image: linear-gradient(top, #3BA4C7 0%, #1982A5 100%);
-webkit-box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;
-moz-box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;
box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;
}
  
 
  

    
    открыть на весь экран
  


  
Donec rutrum congue leo eget malesuada.
  
Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Vivamus
suscipit tortor eget felis porttitor volutpat. Proin eget tortor risus. Praesent sapien
massa, convallis a pellentesque nec, egestas non nisi. Lorem ipsum dolor sit amet,
    consectetur adipiscing elit. Mauris blandit aliquet elit, eget tincidunt nibh
pulvinar a. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Proin
eget tortor risus. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus.
    Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a.





ссылка на codepen


Ответ 3

$("#button").click(function() {
  var h = $(document).height();//получаем высоту документа и записываем в переменную "h"

  $(".conteiner").css({'width': "100%", 'height': h, 'position': "absolute",'margin-top':
"0px", 'z-index': "99999"}); //устанавливаем новые стили для 

});
* {
  margin: 0px;
  padding: 0px;
}
html,
body {
  min-height: 100%;
}
body {
  background: #ddd;
}
.conteiner {
  background: #F3EFE1;
  overflow: auto;
  width: 200px;
  height: 200px;
  margin: 0 auto;
  margin-top: 40px;
  position: relative;
  -webkit-box-shadow: inset 0px 0px 9px 2px rgba(0, 0, 0, 0.32);
  -moz-box-shadow: inset 0px 0px 9px 2px rgba(0, 0, 0, 0.32);
  box-shadow: inset 0px 0px 9px 2px rgba(0, 0, 0, 0.32);
}
#button {
  float: right;
  width: 80px;
  cursor: pointer;
  text-align: center;
  padding: 4px 13px;
  border: solid 1px #004F72;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  font: 12px Verdana, Geneva, sans-serif;
  font-weight: bold;
  color: #E5FFFF;
  background-color: #3BA4C7;
  background-image: linear-gradient(top, #3BA4C7 0%, #1982A5 100%);
  -webkit-box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;
  -moz-box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;
  box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;
}


  
Развернуть



Ответ 4

$("#button").click(function() {
  $(this).closest('.conteiner').toggleClass('expland');
});
* {
  margin: 0px;
  padding: 0px;
}
html,
body {
  min-height: 100%;
}
body {
  background: #ddd;
}
.conteiner {
  background: #F3EFE1;
  overflow: auto;
  width: 200px;
  height: 200px;
  margin: 0 auto;
  margin-top: 40px;
  position: relative;
  -webkit-box-shadow: inset 0px 0px 9px 2px rgba(0, 0, 0, 0.32);
  -moz-box-shadow: inset 0px 0px 9px 2px rgba(0, 0, 0, 0.32);
  box-shadow: inset 0px 0px 9px 2px rgba(0, 0, 0, 0.32);
}
.conteiner.expland {
  position: fixed;
  top: 0; 
  left: 0;
  right: 0;
  bottom: 0;
  width: auto;
  height: auto;
  margin: 0;
}
#button {
  float: right;
  width: 80px;
  cursor: pointer;
  text-align: center;
  padding: 4px 13px;
  border: solid 1px #004F72;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  font: 12px Verdana, Geneva, sans-serif;
  font-weight: bold;
  color: #E5FFFF;
  background-color: #3BA4C7;
  background-image: linear-gradient(top, #3BA4C7 0%, #1982A5 100%);
  -webkit-box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;
  -moz-box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;
  box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;
}


  
Развернуть