<style type="text/css">
*
{
margin:0;
padding:0;
}
#mainTop
{
height:90px;
overflow:hidden;
}
#bottomLeft
{
height:100%;
width:15%;
float:left;
overflow:hidden;
position:relative;
}
#bottomRight
{
height:100%;
width:85%;
float:left;
overflow:hidden;
}
#split
{
width:10px;
height:100%;
background:black;
position:absolute;
right:0;
top:0;
}
#leftContent
{
height:100%;
overflow:auto;
margin-right:10px; /* 寬度和split的寬度一致 */
}
#rightContent
{
height:100%:
overflow:auto;
}
</style>
</head>
<body>
<div>
<div id="mainTop">c</div>
<div id="mainBottom">
<div id="bottomLeft">
<div id="split"></div>
<div id="leftContent">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaabe
</div>
</div>
<!-- 為什麼在bottomRight還套一個rightContent：當對bottomRight設定margin或padding會將它占的位置加上
margin或padding的寬度，導致溢出。在裡面再套一個rightContent，讓rightContent的寬度自動，當設定rightContent的margin或padding時，它占的整體位置不變，會將內容的寬度自動變小，
margin或padding的寬度+width=rightContent的寬度
-->
<div id="bottomRight">
<div id="rightContent">b</div>
</div>
<div style="clear:both;"></div>
</div>
</div>
</body>
<script type="text/javascript">
var docHeight = document.documentElement.clientHeight;
var mainBottom = document.getElementById("mainBottom");
// 90：是mainTop的高度
mainBottom.style.height = (docHeight - 90).toString() + "px";
document.getElementById("bottomLeft").onscroll = function() {
document.getElementById("split").style.position = "absolute";
document.getElementById("split").style.right = "2px";
};
</script>
</html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
