Question

我正在尝试在非滚动列flexbox的视图范围内容纳4个div，但我似乎无法使其正常工作。

我想要什么：

我的经历：

我不知道我在做什么，只是随机排列与flex相关的CSS字段以尝试修复它。如果有人指出什么地方出了问题，我将永远爱你。

这是我代码的要旨：

body {
  overflow: hidden;
  margin: 0;
  width: 100%;
  height: 100%;
}

#flexcontent {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}
#header #firstContent #secondContent {
  flex: 1 1 auto;
}
#header {
  background-color: green;
      font-weight: 700;
    align-content: center;
    font-size: 7rem;
}
#firstContent {
  background-color: red;
}

#secondContent {
  background-color: yellow;
}
#picture {
  background-color: blue;
  flex: 0 1 auto;
}

<body>
  <div id="flexcontainer">
    <div id="header">Title</div>
    <div id="picture"><img src="https://s3-us-west-2.amazonaws.com/uw-s3-cdn/wp-content/uploads/sites/6/2017/11/04133712/waterfall-1140x760.jpg"/></div>
    <div id="firstContent">first</div>
    <div id="secondContent">second</div>
  </div>
</body>

Answer 1

请在下面尝试。如果图像无法按预期缩放或纵横比变化，请使用object-fit。

#flexcontainer {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

#picture {
  flex: 1;
  min-height: 0;
}

body {
  margin: 0;
}

img {
  object-fit: contain;
  height: 100%;
  width: auto;
}

<div id="flexcontainer">
  <div id="header">Title</div>
  <div id="picture"><img src="https://s3-us-west-2.amazonaws.com/uw-s3-cdn/wp-content/uploads/sites/6/2017/11/04133712/waterfall-1140x760.jpg" /></div>
  <div id="firstContent">first</div>
  <div id="secondContent">second</div>
</div>

Answer 2

请检查您的容器div ID

<div id="flexcontainer">

更改

#flexcontent {
 display: flex;
 flex-direction: column;
 width: 100%;
 height: 100%;
}

到

#flexcontainer {
 display: flex;
 flex-direction: column;
 width: 100%;
 height: 100%;
}

尝试使对象适合img

img {
 object-fit: contain;
 height: 100%;
}

Answer 3

您的CSS，输入错误和使用的值中有几处需要解决

==

html, /* to inherit height */
body {
  margin: 0;
  width: 100%;
  height: 100%;
}

#flexcontainer {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 0; /* force size calculation*/
}
#header,/* you meant each one of them */
#firstContent,
#secondContent {
  flex: 1;
  margin: 2px 5vw;/* for demo */
}
#header {
  background-color: green;
  font-weight: 700;
  /* align-content: center; or did you forget display:flex here */
  font-size: calc(1rem + 2vw);
}
#firstContent {
  background-color: red;
}

#secondContent {
  background-color: yellow;
}
#picture { 
  display: flex;
  min-height: 0; /* force size calculation*/
}
img {
  max-height: 90%;/* whatever */
  margin: auto;/* or align-content + justify-content : center on  flex parent*/
}

Answer 4

允许将保存图片的项目放置到shrink below its content size。

定义图像的参数。

（已在Chrome，Firefox和Edge中测试。）

#flexcontainer {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

#picture {
  min-height: 0;
  background-color: blue;
}

#picture>img {
  width: 100%;
  max-height: 100%;
  object-fit: contain;
}

#header {
  background-color: green;
  font-weight: 700;
  font-size: 7rem;
}

#firstContent {
  background-color: red;
}

#secondContent {
  background-color: yellow;
}

body {
  margin: 0;
}

<div id="flexcontainer">
  <div id="header">Title</div>
  <div id="picture"><img src="https://s3-us-west-2.amazonaws.com/uw-s3-cdn/wp-content/uploads/sites/6/2017/11/04133712/waterfall-1140x760.jpg" /></div>
  <div id="firstContent">first</div>
  <div id="secondContent">second</div>
</div>

jsFiddle demo

Answer 5

我整理了一些html并简化了CSS。您想从body标记中删除overflow: hidden，并为每个元素分配一个类而不是一个id。最后，通过使image标签本身成为flexbox项来简化image部分：

html,
body {
  height: 100%
}

body {
  /*overflow: hidden;*/
  margin: 0;
}

.flexContainer {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.flexContainer__header,
.flexContainer__firstContent,
.flexContainer__secondContent {
  flex: 1 1 auto;
}

.flexContainer__header {
  background-color: green;
  font-weight: 700;
  align-content: center;
  font-size: 7rem;
}

.flexContainer__firstContent {
  background-color: red;
}

.flexContainer__secondContent {
  background-color: yellow;
}

.flexContainer__picture {
  display: block;
  width: 100%;
}

<div class="flexContainer">
  <div class="flexContainer__header">Title</div>
  <img class="flexContainer__picture" src="https://s3-us-west-2.amazonaws.com/uw-s3-cdn/wp-content/uploads/sites/6/2017/11/04133712/waterfall-1140x760.jpg" />
  <div class="flexContainer__firstContent">first</div>
  <div class="flexContainer__secondContent">second</div>
</div>

将所有内容放入静态flex列中

5 个答案:

jsFiddle demo