Question

我有一个带有简单英雄类型图像（或横幅），导航标题和搜索输入容器的网站，根据某些设置，其大小可以可变。

====
||||||||||
||||||||||
;;;;;;;;;

这意味着
-navigation标头
-横幅图片
-搜索容器

我希望所有这三个容器始终位于文件夹上方，并完全适合用户的屏幕。

导航菜单始终是屏幕视口高度的10％

搜索容器是在服务器上计算得出的，且高度可变例如，搜索容器可能有2个搜索文本框，一个位于另一个之上，也可能只有1个。

在搜索容器和导航菜单获得应有的份额之后，横幅图像是我唯一要填充剩余空间的图像。

<div style="height:100vh;display: flex; flex-direction: column">
<div style="background-color:red;height:150px">navigation menu (always 150px)u</div>

<div style="background-color:antiquewhite;height: 200px;"> hero image image ( this must take over the space left over in the viewport ) after the nav menu and bottom space took their share</div>

<div style="background-color:aqua;min-height: 405px;"> variable height container can be 400px or 600px depending on what it contains</div>

http://cssdeck.com/labs/gemoy4ga

Answer 1

首先，将内联样式与style=属性一起使用会使代码极难管理。我建议使用类和实际的样式表。我已经在下面的代码示例中这样做了。

您可以使用flex-grow和flex-shrink属性来控制哪些元素随着flex-box的大小而增长和缩小：

https://developer.mozilla.org/en/docs/Web/CSS/flex-grow https://developer.mozilla.org/en/docs/Web/CSS/flex-shrink

这是我的实现方式

.wrapper{
  display:flex;
  flex-direction:column;
  height:100vh;
}
.wrapper .nav{
  flex-shrink:0;
  flex-grow:0;
  height:10%;
  
  background-color:red;
}
.wrapper .hero{
  flex-grow:1;
  
  background-color:antiquewhite;
}
.wrapper .search{
  height:400px;

  background-color:aqua;
}

<div class="wrapper">
    <div class="nav">navigation menu (always 150px)u</div>

    <div class="hero">hero image ( this must take over the occupied space</div>

    <div class="search">variable height container can be 400px or 600px depending on what it contains</div>
</div>

请注意，您已经说过导航应该同时为“总是150像素”和“视口高度的10％”。我不确定您真正想要的是哪个，所以后者也去了。

Answer 2

以下是解决问题的两种方法，方法是在flex图像容器上添加hero值。

由于外部div具有flex-direction: column，因此您可以在其子项上使用flex属性来确定它们是否会收缩，增长，保持不变并设置柔韧性-基础。请参见此处以获得良好的摘要：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

但是，您还需要确定英雄形象的最低高度，因为这将面临两个问题。以下示例显示了您将在解决方案中面临的两个问题。

下面有两个示例来说明您使用英雄图像方法会遇到的问题。

首先，将英雄图像嵌入为响应图像：

即使在较小的屏幕上，这也将保持图像的高度（无论图像的高度与该图像的宽度相同）。

但是，在大屏幕上，您需要确保使用足够高的图像来填充.hero格。

请参见下面的代码段，并确保单击“整页”以查看多余的空白

.container {
    height:100vh;
    display: flex; 
    flex-direction: column
}

.nav {
    background-color:red;
    flex: 0 0 150px;
    height: 10%;
}

.hero {
    flex: 1 1 0;
}

.img-responsive {
    display: block;
    max-width: 100%;
    width:100%;
}

.variable {
    flex: 0 0 auto;
    background-color:aqua;
    min-height: 405px;
    max-height: 600px;
}

<div class='container'>
  <div class="nav">
      navigation menu (always 150px)u
  </div>

  <div class='hero'>
      <img src="https://via.placeholder.com/1280x200/?text=Hero+Image" class='img-responsive'>
  </div>

  <div class='variable'> 
      variable height container can be 400px or 600px depending on what it contains
  </div>
</div>

第二，在hero div上设置背景图片

由于导航和可变高度div将占据所有空间，因此英雄图像将在小屏幕上折叠。

.container {
    height:100vh;
    display: flex; 
    flex-direction: column
}

.nav {
    background-color:red;
    flex: 0 0 150px;
    height: 10%;
}

.hero {
    flex: 1 1 0;
    background-image: url(https://via.placeholder.com/1280x200/?text=Hero+Image);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;
}

.img-responsive {
    display: block;
    max-width: 100%;
    width:100%;
}

.variable {
    flex: 0 0 auto;
    background-color:aqua;
    min-height: 405px;
    max-height: 600px;
}

<div class='container'>
  <div class="nav">
      navigation menu (always 150px)u
  </div>

  <div class='hero'>
      
  </div>

  <div class='variable'> 
      variable height container can be 400px or 600px depending on what it contains
  </div>
</div>

这两种情况下的解决方案都必须包含media queries，以根据屏幕尺寸说明英雄块高度的变化。对于background-image方法，您可以在height div中添加hero以适合您的期望结果。

一种可能的方法

向英雄形象添加flex-basis。我选择了200px并将flex-shrink的值设置为0。在大屏幕上，我只想确保我的图像足够大以至于看起来不像此处那样拉伸。

.container {
    height:100vh;
    display: flex; 
    flex-direction: column
}

.nav {
    background-color:red;
    flex: 0 0 150px;
    height: 10%;
}

.hero {
    flex: 1 0 200px;
    background-image: url(https://via.placeholder.com/1280x200/?text=Hero+Image);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;
    
}

.img-responsive {
    display: block;
    max-width: 100%;
    width:100%;
}

.variable {
    flex: 0 0 auto;
    background-color:aqua;
    min-height: 405px;
    max-height: 600px;
}

<div class='container'>
  <div class="nav">
      navigation menu (always 150px)u
  </div>

  <div class='hero'>
      <!-- Background Image Approach -->
  </div>

  <div class='variable'> 
      variable height container can be 400px or 600px depending on what it contains
  </div>
</div>

Answer 3

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  margin: 0;
}

header {
  flex: 0 0 150px; /* don't grow, don't shrink, fixed at 150px height */
  background-color: red;
}

main {
  flex: 1; /* flex-grow: 1, flex-shrink: 1, flex-basis: 0 */
  background-color: antiquewhite;
}

footer {
  flex: 1 0 400px;   /* min-height: 400px and can expand */
  max-height: 600px;
  background-color: aqua;
}

<body>
  <header>navigation menu (always 150px)</header>
  <main>hero image (this must take over the occupied space)</main>
  <footer>variable height container can be 400px or 600px depending on what it containers</footer>
</body>

确保部分在css的折叠上方

3 个答案: