Divide fixed height between children

Question

Divide fixed height between children

Navigation

#1 by (0 votes)

0

I have a div (let's call it X) that occupies 85% of the screen and I need that within that div other divs can be added, some contain text, other images and other videos. Each child occupies 100% of the width of the father, but the height of the father is distributed among the div child that he has (giving the same amount of space to each one, even if one only needs 10 pixels). Any suggestions on how to carry it out?

The following code works without images, but the images break the flex container going out on the outside, any ideas?

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>

  <style>
    body {
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      background-color: black;
    }
    
    #container {
      width: 85%;
      height: 85%;
      position: fixed;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
      display: flex;
      flex-direction: column;
      background-color: blue;
    }
    
    .elem {
      border: 1px solid #BBBB1199;
      flex-basis: 100%;
      box-sizing: border-box;
    }
  </style>
</head>

<body>
  <div id="container">
    <div class="image elem">
      <img src="https://www.hd-wallpapersdownload.com/script/bulk-upload/lion-big-wallpapers.jpg" />
    </div>
    <div class="elem">TEXT TEXT TEXT</div>
  </div>
</body>

</html>

html css web

asked by Gammel 28.04.2018 в 04:14

source

1 answer

How can I take the largest and smallest value and paint the whole picture? Visual Java Netbeans I can not load the image in the store

score 0 · Answer 1

That all the div children have the same height, you have it done with flexbox and it works correctly. The problem is when the content takes more than the account.

For those cases you could add a overflow: hidden to the div children so that the images / video / content do not break the size of their container. So all div with class elem will have the same height.

The problem now is that when an image (or a video) is very large, it is cut off. If you want it to look complete, you could add height: 100% to fit the size of div that contains it.

Here you can see your code only with those two changes. Now the div occupy the same and the image of the lion fits the size of its container:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>

  <style>
    body {
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      background-color: black;
    }
    
    #container {
      width: 85%;
      height: 85%;
      position: fixed;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
      display: flex;
      flex-direction: column;
      background-color: blue;
    }
    
    .elem {
      border: 1px solid #BBBB1199;
      flex-basis: 100%;
      box-sizing: border-box;
      overflow: hidden;
    }

    .elem img {
      max-height: 100%;
    }
  </style>
</head>

<body>
  <div id="container">
    <div class="image elem">
      <img src="https://www.hd-wallpapersdownload.com/script/bulk-upload/lion-big-wallpapers.jpg" />
    </div>
    <div class="elem">TEXT TEXT TEXT</div>
  </div>
</body>

</html>