代码镜像块的高度在Chrome和Safari中并不相同

Question

代码镜像块的高度在Chrome和Safari中并不相同

Sof*_*mur 15 css height cross-browser codemirror flexbox

我想制作一个满足以下条件的布局:

1)它顶部有一个块height,其内容符合其内容

2)它下面有一个code-mirror和一个块,它完全填写页面的其余部分height.

我在这里做过一个傻瓜.问题是它运作良好Chrome 57.0.2987.133,但它不能很好地工作Safari 10.1:height它code-mirror是不够的; 它只显示76代码行而不是正确的80行.

有谁知道如何解决这一问题？

<style>
    .rb {
        display: flex;
        flex-direction: column;
        height: 100%;
    }
    .rb .container {
        flex: 1;
        display: flex;
        width: 100%;
        height: 100% /* new */
    }
    .rb .first-row {
        border: 1px solid black;
        /*flex: 0 0 60px;*/
    }
    .rb .CodeMirror {
        flex: 1;
        height: auto;
    }
    .rb .flex-preview {
        flex: 1;
        border: 1px solid black;
    }
</style>

<div class="rb">
    <div class="first-row">
        1<br/>2<br/>3<br/>4<br/>
    </div>
    <div class="container">
        <textarea ng-model="body" ui-codemirror="option"></textarea>
        <div class="flex-preview">
        </div>
    </div>
</div>

<body>
  <div ng-app="myApp" ng-controller="myCtrl">
    <ui-view></ui-view>
  </div>
  <script>
    var app = angular.module("myApp", ['ui.router', 'ui.codemirror']);
    app.config(['$stateProvider', function ($stateProvider) {
        $stateProvider
            .state('global', {
              templateUrl: 'template.html'
            })
    }]);
    app.controller('myCtrl', ['$scope', '$state', function ($scope, $state) {
      $scope.option = { mode: 'text/html', lineNumbers: true, matchBrackets: true };
      $scope.body = ""
      for (var i = 1; i <= 79; i++) 
          $scope.body = $scope.body + "a\n";
      $state.go('global')
    }])

  </script>
</body>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Mic*_*l_B 3

code-mirror您正在使用设置容器 ( .rb)的高度height: 100%。但是您没有在父容器上指定任何高度。

当您使用百分比高度时，某些浏览器仍然要求您在父级上定义高度（使用属性height）。这是规范语言的传统实现，尽管并非所有浏览器都不再遵循这种解释。

但是，如果您要height: 100%在元素上使用，并且希望确保跨浏览器支持，请确保父容器具有定义的高度。如果父级也使用百分比高度，则其父级也必须具有定义的高度。

或者，只需使用height: 100vh即可.rb完成。

然后你的flex: 1on.container将努力消耗可用高度。

更多信息和其他解决方案请参见此处：

归档时间：	8 年，7 月前
查看次数：	506 次
最近记录：	8 年，6 月前