Я хочу создать макет, который удовлетворяет следующим условиям:
1) у него есть блок сверху, чей height соответствует его содержимому
2) ниже он имеет code-mirror и блок бок о бок, которые заполняют ровно остальную часть страницы в терминах height.
Я сделал здесь plunker. Проблема в том, что он хорошо работает в 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>
