Как растянуть элемент на всю высоту не используя height:100%?
4 ответа
Относительно окна :: 100vh
body {
margin: 0;
}
div {
height: 100vh;
background: linear-gradient(blue, red);
}
<div></div>
Относительно окна :: 100%
html, body, div {
margin: 0;
height: 100%;
}
div {
background: linear-gradient(blue, red);
}
<div></div>
Относительно окна :: absolute / fixed
div {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
background: linear-gradient(blue, red);
}
<div></div>
Относительно контейнера :: absolute
section {
position: relative;
min-height: 120px;
margin: 1em;
outline: 1px dotted green;
}
div {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
background: linear-gradient(blue, red);
}
<section><div></div></section>
Относительно контейнера :: flex
section {
display: flex;
min-height: 120px;
margin: 1em;
outline: 1px dotted green;
}
div {
width: 100%;
background: linear-gradient(blue, red);
}
<section><div></div></section>
Относительно контейнера :: grid
section {
display: grid;
min-height: 120px;
margin: 1em;
outline: 1px dotted green;
}
div {
background: linear-gradient(blue, red);
}
<section><div></div></section>
-
справедливости ради, не сказано, что надо растянуть "на высоту окна", по этому 100vh - тут лишнее. Commented 30 авг. 2017 в 19:18
-
используй width:100%;
уверяю тебя, что что элемент растянется на всю ширину, и как видишь без height:100%
.block{
height: 100vh; /* 1vh = 1% от выстоты холста браузера*/
}
Это если относительно только окна браузера, тогда в "vh" Также если присвоить элементу position: absolute;
или position: fixed;
можно и в процентах. Внутри блока тоже в процентах.
И еще вариант:
$(document).ready(function() {
function setHeight() {
windowHeight = $(window).innerHeight();
$('#block').css('min-height', windowHeight);
};
setHeight();
$(window).resize(function() {
setHeight();
});
});
html,
body {
margin: 0;
padding: 0;
}
#block {
width: 100px;
background-color: chocolate;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="block"></div>