Question

我想归档以下布局：

 _____________________________
[ img using up the            ]
[ rest of the available space ]
[                             ]
[                             ]          
[_____________________________]
[          Button 1           ]
[          Button 2           ]
[          Button 2           ]
[_____________________________]

flexbox的高度应为100vh
按钮应与页面底部对齐
当图像比率不匹配时，图像应使用剩余的可用空间，缩小并获得一些填充。

我尝试了以下内容：

＆＃13;

.myflex {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100vh;
}

img {
  object-fit: contain;
  flex-grow: 1;
  max-height: 100%;
  max-width: 100%;
}

.buttons {
  flex-shrink:0;
}

＆＃13;

<div class="myflex">
  <img src="http://lorempixel.com/output/animals-h-c-421-856-10.jpg" />
  <div class="buttons">
    <div>
      button1
    </div>
    <div>
     button2
    </div>
    <div>
      button3
    </div>
  </div>
</div>

＆＃13;

现在我的问题是，图像似乎并不知道视口的可用空间是什么，部分在可见区域之外。

有谁知道如何解决这个问题？

Answer 1

刚拿出flexbox和ass @kukkuz建议，将body margin设置为0

body {
  margin: 0
}

.myflex {
  text-align: center;
  height: 100vh;
}

img {
  max-height: 100%;
  max-width: 100%;
}

.buttons {
}

Answer 2

尝试

void create1(A*** a, int size)
{
    *a = (A**) malloc(size* sizeof(A*));
    for (int i = 0; i < size; i++)
    {
        a[0][i] = (A*)malloc(size * sizeof(A));
    }
}

或者您可以将img { flex: auto; width: 100%; min-height: 0; } .buttons { flex: none }放入新的弹性盒中

使用高度为100vh的Flexbox和对象适合

2 个答案: