我想制作一个满足以下条件的布局:
1) 它的顶部有一个 block ，其 height 取决于它的内容
2) 下面有一个 code-mirror 和一个并排的 block ，它们根据 height<完全填充页面的其余部分.
我做了一个plunker这里。问题是它在 Chrome 57.0.2987.133 中运行良好，而在 Safari 10.1 中运行不佳: 的 是不够的；它只显示 height code-mirror76 行代码，而不是正确的 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>
最佳答案
.rb .container {
flex: 1;
display: flex;
width: 100%;
height: auto /* new */
}
尝试将高度用作“自动”。
关于css - 代码镜像 block 的高度在 Chrome 和 Safari 中不一样，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43820360/