拆分视图HTML的单个滚动条
拆分视图HTML的单个滚动条
提问于 2018-08-19 04:50:08
我创建了一个拆分视图，将我的网页分成左右两部分。目前，左侧包含用户输入的文本区域，右侧模拟用户输入的内容。我现在面临的问题是，一旦文本区域扩展到大于用户的视图，网页的两侧就会有独立的滚动条(如图所示)。我想让网页有一个滚动条来控制两个视图，但我不确定该怎么做。
HTML：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>sCalc</title>
<!-- Stylesheets -->
<link rel="stylesheet" href="scripts/bootstrap.min.css">
<link rel="stylesheet" href="scripts/styles.css">
<!-- Scripts -->
<script>
delete module.exports
</script>
<script src="scripts/jquery-3.2.1.js"></script>
<script src="./window.js" charset="utf-8"></script>
</head>
<body>
<div id="container" class="container-fluid">
<!-- Input row -->
<div class="split left">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 ">
<h3 class="hash-heading">Input</h3>
<textarea id="text-input" class="form-control text-input" style="overflow:hidden" placeholder="Enter text and see the results..."></textarea>
<!-- Script handling auto resize of input box -->
<script>
var textarea = document.getElementById("text-input");
textarea.oninput = function() {
textarea.style.height = "";
textarea.style.height = Math.min(textarea.scrollHeight) + "px";
};
</script>
</div>
</div>
<!-- Output row -->
<div class="split right">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<h3 class="hash-heading">Output</h3>
<pre id="usrOutput" class="hash-output"> </pre>
</div>
</div>
</div>
</body>
</html>CSS：
textarea {
resize: none;
}
.split {
height: 100%;
width: 50%;
position: fixed;
z-index: 1;
top: 0;
overflow-x: hidden;
padding-top: 20px;
}
.left {
left: 0;
background-color: white;
}
.right {
right: 0;
background-color: #E0E0E0;
}回答 1
Stack Overflow用户
回答已采纳
发布于 2018-08-19 05:12:20
不使用position: fixed来分割屏幕，而是使用flexbox。当您向textarea窗格添加行时，另一个窗格也会伸展，您将拥有一个滚动条：
textarea {
resize: none;
overflow: hidden;
}
#container {
display: flex;
min-height: 100vh;
}
.split {
width: 50%;
padding-top: 20px;
}
.left {
background-color: white;
}
.right {
background-color: #E0E0E0;
}
html, body {
margin: 0;
}
* {
box-sizing: border-box;
}<link rel="stylesheet" href="scripts/bootstrap.min.css">
<div id="container" class="container-fluid">
<!-- Input row -->
<div class="split left">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 ">
<h3 class="hash-heading">Input</h3>
<textarea id="text-input" class="form-control text-input" placeholder="Enter text and see the results..."></textarea>
<!-- Script handling auto resize of input box -->
<script>
var textarea = document.getElementById("text-input");
textarea.oninput = function() {
textarea.style.height = "";
textarea.style.height = Math.min(textarea.scrollHeight) + "px";
};
</script>
</div>
</div>
<!-- Output row -->
<div class="split right">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<h3 class="hash-heading">Output</h3>
<pre id="usrOutput" class="hash-output"> </pre>
</div>
</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51912438
复制相关文章
相似问题