TransWikia.com

как дать блоку div 100% высоту если position:relative

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>
csshtml

One Answer

Если Вы задаёте размеры в процентах, то эти самые проценты должны из чего-то вычисляться.

  • Высота нужного Вам блока исходит из высоты своего контейнера - <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

Add your own answers!

Ask a Question

Get help from others!

Recent Answers

Recent Questions

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP