Question

我有3个div，每个div都有width:100%，彼此放在一起。这是它的外观：

我的代码是：

<div class="welcome">
   <h1>Welcome</h1>
   <small>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
   tempor incididunt ut labore et dolore magna aliqua.</small>
</div>
<div class="welcome2">
   <h1>About</h1>
   <small>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
   tempor incididunt ut labore et dolore magna aliqua.<small>
</div>
<div class="welcome3">
   <h1>Why choose us?</h1>
   <div class="row">
      <div class="col-md-4 why">
         <i class="fa fa-reply-all fa-3x why-icon"></i>
         <strong>Fast support</strong>
         <p>Our moderators will help you with your problem.</p>
      </div>
      <div class="col-md-4 why">
         <i class="fa fa-reply-all fa-3x why-icon"></i>
         <strong>Fast support</strong>
         <p>Our moderators will help you with your problem.</p>
      </div>
      <div class="col-md-4 why">
         <i class="fa fa-reply-all fa-3x why-icon"></i>
         <strong>Fast support</strong>
         <p>Our moderators will help you with your problem.</p>
      </div>
      <div class="col-md-4 why">
         <i class="fa fa-reply-all fa-3x why-icon"></i>
         <strong>Fast support</strong>
         <p>Our moderators will help you with your problem.</p>
      </div>
      <div class="col-md-4 why">
         <i class="fa fa-reply-all fa-3x why-icon"></i>
         <strong>Fast support</strong>
         <p>Our moderators will help you with your problem.</p>
      </div>
      <div class="col-md-4 why">
         <i class="fa fa-reply-all fa-3x why-icon"></i>
         <strong>Fast support</strong>
         <p>Our moderators will help you with your problem.</p>
      </div>
   </div>
</div>

CSS

.welcome
{
    text-align: center;
    width: 100%;
    background-color: #3BA666;
    background-image: linear-gradient(60deg, #4DAC71 50%, #3BA666 50%);
    padding: 50px;
}

.welcome2
{
    text-align: center;
    width: 100%;
    background-color: #FF61E7;
    background-image: linear-gradient(60deg, #FF61E7 50%, #FF61D0 50%);
    padding: 50px;
}

.welcome3
{
    text-align: center;
    width: 100%;
    background-color: #32C8DE;
    background-image: linear-gradient(60deg, #32D0DE 50%, #32C8DE 50%);
    padding: 50px;
}

.why
{
    /** text-align: left; **/
    padding: 15px;
}

.why-icon
{
    color: #0E495C;
    display: block;
}

我希望它像那样 - 前两个是正常高度，最后一个总是填充空白空间。这可能吗？

这是小提琴：https://jsfiddle.net/21dydo07/1/

Answer 1

是的，使用CSS3。给设计的父母（身体，html，......）高度100％。然后将一些高度设置为.welcome和.welcome2，例如每个200px。在那之后，设置.welcome3来完成剩下的工作，如下所示：

html, body {height: 100%}
.welcome, .welcome2 {height: 200px}
.welcome3 {height: calc(100% - 400px)}

另一个解决方案是为每个元素设置特定的高度（也可以是CSS2可配合），但是这不允许你总是填充100％的屏幕高度并让第三个div具有可变的高度

如果你需要第一个解决方案，但你也需要CSS2兼容性（例如IE8），那么你可能需要一个javascript回退，这将在页面加载时将高度设置为.welcome3，类似这样（需要jQuery）：

$(document).ready(function() {
    $(".welcome3").css("height",$(window).height()-400);
});

Answer 2

如果前两个区块中的句子可以换行为单行，请使用： 您可以使用calc()。确保这三个包装器具有wp.shortcode.attrs( text )样式。对于height和.welcome，请在.welcome2或padding中设置line-height和px。例如，如果计算出的高度为em，则300px使用height: calc(100% - 300px)。注意：运算符.welcome3周围的空格非常重要。

Answer 3

您可以使用 Flexbox 执行此操作，在min-height: 100vh; div上设置wrap，在flex: 1;设置welcome3，这样就可以获得可用空间视

html, body {
  margin: 0;
  padding: 0;
}

.wrap {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  text-align: center;
}

.welcome {
  background: #3CA666;
  padding: 20px;
}

.welcome2 {
  background: #FF61D0;
  padding: 20px;
}

.welcome3 {
  background: #32C9DE;
  flex: 1;
  padding: 20px;
}

<div class="wrap">
  <div class="welcome">
      <h1>Welcome</h1>
      <small>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua.</small>
    </div>
    <div class="welcome2">
      <h1>About</h1>
      <small>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua.</small>small>
    </div>
    <div class="welcome3">
        <h1>Welcome 3</h1>
        <small>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
   tempor incididunt ut labore et dolore magna aliqua</small>
    </div>
</div>

3水平div，将last的高度设置为auto

3 个答案: