【发布时间】：2017-10-04 20:17:24
【问题描述】：
我想做一个满足以下条件的布局：
1) 它的顶部有一个块，其height 取决于它的内容
2) 在它下面有一个code-mirror 和一个并排的块，它们完全按照height 填充页面的其余部分。
我在这里做了一个plunker。问题是它在Chrome 57.0.2987.133 中运行良好，而在Safari 10.1 中运行不佳：code-mirror 的height 还不够；它只显示代码的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>
【问题讨论】：
-
星号 css (*) 选择所有元素（或选定类型的元素，具体取决于您的编码方式），例如div *{ css here} 见w3schools.com/cssref/sel_all.asp
-
你把你的rb变成id了吗？这可能有助于尝试这个run.plnkr.co/q1bvFaeFVsbBviQs
-
我在上面发布的 plunker 在 windows safari 中工作。你是怎么上去的
-
它说“未找到”
-
plnkr.co/edit/8XYdWN3tRXjIfUWTCSRV?p=preview 虽然其他链接有效，但我分叉了你的
标签： css cross-browser flexbox height codemirror