将离子v3按钮高度设置为连续100％高度

Question

我正在使用离子框架v3开发Android应用程序，我试图让按钮占据他们所在行的100％高度，但我没有做到所以。到目前为止的结果是 this

这是我home.html中的相关部分：

<ion-content  scroll="false">
  <section class = "home-container">
  <ion-row class="first-row">
    <ion-col>
      <button ion-button block>
          Button 1
      </button>
    </ion-col>
    <ion-col>
      <button ion-button block>
          Button 2
      </button>
    </ion-col>
  </ion-row>

  <ion-row class="second-row">
    <ion-col>
      <button ion-button block>
          Button 3
      </button>
    </ion-col>
    <ion-col>
      <button ion-button block>
          Button 4
      </button>
    </ion-col>
  </ion-row>
  </section>
</ion-content>

和我的home.scss：

.home-container {
    display: -webkit-flex;
    flex-direction: column;
    height: 100%;
}

.home-container > .row {
    flex: 1;
}

.first-row {
    flex: 0.5 !important;
    background-color: #aeeeee;
}

.second-row {
    flex: 1.5 !important;
    background-color: #feeeee;
}

.button-md {
    height: 100%;
}

Answer 1

您应该只能使用 css ：

来实现这一目标

// POST: /Account/Register
    [HttpPost]
    [AllowAnonymous]
    [ValidateAntiForgeryToken]
    public async Task<ActionResult> Register(RegisterViewModel model)
    {
        // define variables
        var userID                                              = User.Identity.GetUserId();
        DateTime nowUTC                                         = DateTime.Now.ToUniversalTime();
        DateTime nowLocal                                       = DateTime.Now.ToLocalTime();
        // check model state and submit form
        if (ModelState.IsValid)
        {
            var user                                            = new ApplicationUser
            {
                UserName                                        = model.UserName,
                FirstName                                       = model.FirstName,
                LastName                                        = model.LastName,
                Gender                                          = model.Gender,
                DateOfBirth                                     = model.DateOfBirth,
                Email                                           = model.Email,
                PhoneNumberPrefix                               = model.PhoneNumberPrefix,
                PhoneNumberSuffix                               = model.PhoneNumberSuffix,
                PhoneNumber                                     = model.PhoneNumberPrefix + model.PhoneNumberSuffix,
                BillingAddress                                  = model.BillingAddress,
                VATNumber                                       = "MwSt-Nummer",
                PreferredLanguage                               = model.PreferredLanguage,
                RegisteredDateTime                              = nowUTC,
                RegisteredLatitude                              = model.RegisteredLatitude,
                RegisteredLongitude                             = model.RegisteredLongitude,
                RegisteredLocation                              = model.RegisteredLocation
            };
            // send confirmation email
            var result                                          = await UserManager.CreateAsync(user, model.Password);
            if (result.Succeeded)
            {
                string code                                     = await UserManager.GenerateEmailConfirmationTokenAsync(user.Id);
                var callbackUrl                                 = Url.Action("ConfirmEmail", "Account", new
                {
                    userId                                      = user.Id,
                    code                                        /*= code*/
                }, protocol: Request.Url.Scheme);
                await UserManager.SendEmailAsync(user.Id, "Bestätige Dein Konto", "Bitte bestätige Dein Konto indem Du <a href=\"" + callbackUrl + "\">hier</a> klickst.");
                ViewBag.Message                                 = "Fast geschafft! Du hast eine Email mit weiteApplicationDbContextren Instruktionen erhalten um die Anmeldung abzuschliessen.";
                // track user activity: post method includes activity name and timestamp along with location
                var SUCCESS                                     = new UserActivities
                {
                    UserID                                      = userID,
                    ActivityName                                = "Register_Success",
                    ActivityTimeStampUTC                        = nowUTC,
                    ActivityLatitude                            = model.RegisteredLatitude,
                    ActivityLongitude                           = model.RegisteredLongitude,
                    ActivityLocation                            = model.RegisteredLocation
                };
                DATADB.UserActivityList.Add(SUCCESS);
                DATADB.SaveChanges();
                return View("PostRegistration");
            }
            AddErrors(result);
        }
        var FAILURE                                             = new UserActivities
        {
            UserID                                              = userID,
            ActivityName                                        = "Register_Failure",
            ActivityTimeStampUTC                                = nowUTC,
            ActivityLatitude                                    = model.RegisteredLatitude,
            ActivityLongitude                                   = model.RegisteredLongitude,
            ActivityLocation                                    = model.RegisteredLocation
        };
        DATADB.UserActivityList.Add(FAILURE);
        DATADB.SaveChanges();
        // repopulate dropdownlists
        ViewBag.gender                                          = DATADB.GenderList.Select(m => new SelectListItem()
        {
            Text                                                = m.Gender,
            Value                                               = m.Gender
        }).ToList();
        ViewBag.countryCode                                     = DATADB.CountryCodeList.Select(m => new SelectListItem()
        {
            Text                                                = m.CountryCode,
            Value                                               = m.CountryCode
        }).ToList();
        ViewBag.preferredLanguage                               = DATADB.LanguageList.Select(m => new SelectListItem()
        {
            Text                                                = m.Language,
            Value                                               = m.Language
        }).ToList();
        return View(model);
    }

特别注意：

1. .home-container { display: flex; flex-direction: column; height: 100%; } .home-container > .row { flex: 1; padding: 0; } .first-row { flex: 0.5 !important; background-color: #aeeeee; } .second-row { flex: 1.5 !important; background-color: #feeeee; } ion-col { display: flex; padding: 5px; } .button-md { height: auto; }
2. ion-col { display: flex; }

结果：



（我在列（.button-md { height: auto; }）中使用了填充，但是如果你想要按钮边缘，你可以删除按钮，它只需要占据行的100％）。

<强>更新

我在使用Android 6.0的Moto G2（真实设备）中进行了测试，并且运行良好：