我想更改 markdown 高度以填充 div 高度，但我做不到。
我有以下文件-
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="assets/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/css/bootstrap-markdown.min.css" rel="stylesheet">
<link href="admin.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="md-editor active half-width">
<textarea id="target-editor" class="target-editor-twitter md-input"> </textarea>
</div>
<div id="result" class="half-width">
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/bootstrap-markdown.js"></script>
<script src="assets/js/markdown.js"></script>
<script src="assets/js/to-markdown.js"></script>
<script src="app.js"></script>
</body>
</html>
app.js
window.onload = function(){
$('#target-editor').markdown({
savable:true,
onShow: function(e){
e.hideButtons("cmdPreview");
},
onSave: function(e) {
alert("Saving '"+e.getContent()+"'...")
},
onChange: function(e){
var content = e.parseContent()
$('#result').html(content);
}
});
};
admin.css
body, html{
height:100%;
}
.half-width{
width:50%;
float:left;
height:100%;
padding:10px;
margin:0;
position:relative;
}
输出是-
如何更改markdown高度以填充div高度？
最佳答案
看片段
window.onload = function(){
$('#target-editor').markdown({
savable:true,
onShow: function(e){
//e.hideButtons("cmdPreview");
e.$textarea.css('resize','vertical');
e.$textarea.css('height', ($(".md-editor").height()-90)+'px');
},
onSave: function(e) {
alert("Saving '"+e.getContent()+"'...")
},
onChange: function(e){
var content = e.parseContent()
$('#result').html(content);
}
});
};
$(window).resize(function(){
$("#target-editor").height(($(".md-editor").height()-90)+'px');
});body, html{
height:100%;
}
.half-width{
width:50%;
float:left;
height:100%;
padding:10px;
margin:0;
position:relative;
}
.md-editor>.md-header {
margin-left: 5px;
}
.md-editor {
height: 100%;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-markdown/2.2.1/js/bootstrap-markdown.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-markdown/2.2.1/css/bootstrap-markdown.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="half-width">
<textarea id="target-editor" class="target-editor-twitter md-input" data-provide="markdown-editable" rows="20"> </textarea>
</div>
<div id="result" class="half-width">
</div>关于javascript - 完整的 bootstrap markdown 高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41208667/