Question

我想在我的内容框中有两行可以说两行都应该平均分割视口的高度（50:50）。我的要求是我希望他们分开高度（40:60），但我是柔性盒子的初学者，所以最初我要用50:50。

第一行将有一个img标签，应该跨越整个宽度和高度。但是该图像上还有最大宽度和高度。第二行将有3个列表项，左侧缩略图

这是codepen：http://codepen.io/spanhawk/pen/Ggjwye

HTML CODE

<html ng-app="ionicApp">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

    <title>Split view equally</title>

    <link href="http://code.ionicframework.com/0.9.27/css/ionic.min.css" rel="stylesheet">
    <script src="http://code.ionicframework.com/1.0.0-beta.14/js/ionic.bundle.min.js"></script>
  </head>

  <body>
    <ion-nav-bar animation="nav-title-slide-ios7" 
                 type="bar-positive" 
                 back-button-type="button-icon" 
                 back-button-icon="ion-arrow-left-c"></ion-nav-bar>

    <ion-nav-view animation="slide-left-right"></ion-nav-view>
    <script id="home.html" type="text/ng-template">
      <ion-view title="Home">
        <ion-content scroll="false">
            <section class="home-container">
      <div class="row">
        <div class="col col-100">
             <img src="http://placehold.it/600x500">
        </div>
      </div>
      <div class="row">
        <div class="col col-100"
             <ion-list>
        <ion-item class="item-thumbnail-left">
          <img src="http://placehold.it/100x100">
          <h1>Header 1</h1>
          </ion-item>
          <ion-item class="item-thumbnail-left">
          <img src="http://placehold.it/100x100">
            <h1>Header 2</h1>
          </ion-item>
            <ion-item class="item-thumbnail-left">
          <img src="http://placehold.it/100x100">
              <h1>Header 3</h1>
          </ion-item>
             </ion-list>
        </div>
      </div>
    </section>
        </ion-content>
      </ion-view>
    </script>
  </body>
</html>

尽管图像的高度和宽度是600x500，我希望它能够占据整个宽度的cantainer，而高度应该是50 50，分为两行

任何人都可以向我解释为什么它不起作用以及如何使其发挥作用？

我正在做教程

中描述的所有内容

http://css-tricks.com/boxes-fill-height-dont-squish1

我在墙上撞了6个小时，想弄清楚它为什么不起作用。关于css和html的一个坏处是，没有异常，错误等。回复为链接主题

Answer 1

只需给你的容器一个明确的高度

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

codepen

等高的柔性排不起作用

1 个答案: