Stack Overflow на русском Asked on February 27, 2021
почему блок list_news не растягивается по высоте на 100% и как это сделать
body{
margin: 0px;
padding: 0px;
background-color: black;
}
.indent_under_header{
position: relative;
width: 100%;
height: 60px;
border: 0.5px solid #3d3d3d;
}
.button{
position: relative;
width:100%;
height: 10vh;
border: 0.5px solid #3d3d3d;
}
.list_news{
position: relative;
height: 100%;
border: 0.5px solid #3d3d3d;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="/css/logotip.css">
<link rel="stylesheet" type="text/css" href="/css/gaming-industry/style.css">
<link rel="stylesheet" type="text/css" href="/css/shrifts.css">
<link rel="stylesheet" href="/css/gaming-industry/style-mobil.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="indent_under_header"></div>
<div class="button"></div>
<div class="list_news"></div>
</body>
</html>
Если Вы задаёте размеры в процентах, то эти самые проценты должны из чего-то вычисляться.
<body>
.<body>
, в свою очередь, опирается на высоту своего родителя <html>
.<html>
отталкивается от размеров окна просмотра браузера, которое имеет вполне себе абсолютные размеры.html {
height: 100%;
box-shadow: inset 0 0 0 15px green;
}
body {
height: 100%;
margin: 0px;
padding: 0px;
background-color: black;
box-shadow: inset 0 0 0 10px red;
}
.indent_under_header {
position: relative;
width: 100%;
height: 60px;
border: 0.5px solid #3d3d3d;
box-sizing: border-box;
box-shadow: inset 0 0 0 5px yellow;
}
.button {
position: relative;
width: 100%;
height: 10vh;
border: 0.5px solid #3d3d3d;
box-sizing: border-box;
box-shadow: inset 0 0 0 5px yellow;
}
.list_news {
position: relative;
height: calc(100% - 60px - 10vh);
border: 0.5px solid #3d3d3d;
box-sizing: border-box;
box-shadow: inset 0 0 0 5px blue;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="/css/logotip.css">
<link rel="stylesheet" type="text/css" href="/css/gaming-industry/style.css">
<link rel="stylesheet" type="text/css" href="/css/shrifts.css">
<link rel="stylesheet" href="/css/gaming-industry/style-mobil.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="indent_under_header"></div>
<div class="button"></div>
<div class="list_news"></div>
</body>
</html>
Но, если указать всей цепочке 100%, то всё равно результат будет не тот, который ожидали, ибо теперь высота блока будет равна высоте окна, а у Вас ещё два блока претендуют на эту высоту. Потому, без вычислений с помощью calc()
, не обойтись и нужно вычесть из 100% высоты соседних блоков.
Но!.. Правильнее всего, в таких случаях использовать flex или grid.
Correct answer by UModeL on February 27, 2021
Get help from others!
Recent Answers
Recent Questions
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP