有关滚动条问题解决方法

最新推荐文章于 2022-02-22 17:10:02 发布

xl900912

最新推荐文章于 2022-02-22 17:10:02 发布

阅读量465

点赞数

分类专栏：工作总遇到的问题文章标签： iframe滚动条

本文链接：https://blog.csdn.net/u012950186/article/details/36897495

版权

工作总遇到的问题专栏收录该内容

1 篇文章 0 订阅

订阅专栏

下面的iframe高度为窗口的高度减去上面div的高度，

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
	#scroll-1 {
        width:200px;
        height:200px;
        overflow:auto;
    }
    #scroll-1 .div1,#scroll-1 .div2{
        width:400px;
        height:400px;
    }    #scroll-1::-webkit-scrollbar {
        width:10px;
        height:10px;
    }
    #scroll-1::-webkit-scrollbar-button    {
        background-color:#fff;
    }
    #scroll-1::-webkit-scrollbar-track     {
        background:#fff;
    }
    #scroll-1::-webkit-scrollbar-track-piece {
        background:#fff;
    }
    #scroll-1::-webkit-scrollbar-thumb{
        background:#fff;
        border-radius:4px;
    }
    #scroll-1::-webkit-scrollbar-corner {
        background:#fff;
    }
    #scroll-1::-webkit-scrollbar-resizer  {
        background:#fff;
	}
	
	

</style>
</head>

<body>
<div id='scroll-1'>
        <div class="div1" >
            <p>请选择Webkit内核的浏览器才可以正常的看到滚动条的变化。
                小天地，大世界是一个Web前端的技术博客。 主要是关于
                HTML 5,CSS 3,JavaScript,JQuery等。除此之外，还
                包含一些PHP语言等的实用例子。</p>
            <p>请选择Webkit内核的浏览器才可以正常的看到滚动条的变化。
                小天地，大世界是一个Web前端的技术博客。 主要是关于
                HTML 5,CSS 3,JavaScript,JQuery等。除此之外，还
                包含一些PHP语言等的实用例子。</p>
            <p>请选择Webkit内核的浏览器才可以正常的看到滚动条的变化。
                小天地，大世界是一个Web前端的技术博客。 主要是关于
                HTML 5,CSS 3,JavaScript,JQuery等。除此之外，还
                包含一些PHP语言等的实用例子。</p>
            <p>请选择Webkit内核的浏览器才可以正常的看到滚动条的变化。
                小天地，大世界是一个Web前端的技术博客。 主要是关于
                HTML 5,CSS 3,JavaScript,JQuery等。除此之外，还
                包含一些PHP语言等的实用例子。</p>
            <p>请选择Webkit内核的浏览器才可以正常的看到滚动条的变化。
                小天地，大世界是一个Web前端的技术博客。 主要是关于
                HTML 5,CSS 3,JavaScript,JQuery等。除此之外，还
                包含一些PHP语言等的实用例子。</p>
        </div>
        <div class="div2" >
            <iframe src="自适应.html" style="overflow:scroll;">
            </iframe>
        </div>
    </div>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title></title> 
<style type="text/css"> 
* {margin:0; padding:0; list-style:none; } 
.wrapper {width: 100%; } 
.left {width:200px; background:#fcc; position:absolute; left:0 ;z-index:1 } 
.right {width:100%; background:#ccc; position:absolute; left:0} 
.content {margin-left:200px; background:#ffc; } 


/*#scroll-1 {
        width:200px;
        height:200px;
        overflow:auto;
    }
    #scroll-1 .div1,#scroll-1 .div2{
        width:400px;
        height:400px;
    }    #wp::-webkit-scrollbar {
        width:10px;
        height:10px;
    }*/
    #wp::-webkit-scrollbar-button    {
        background-color:#f4f9fc;
    }
    #wp::-webkit-scrollbar-track     {
        background:#f4f9fc;
    }
    #wp::-webkit-scrollbar-track-piece {
        background:#f4f9fc;
    }
    #wp::-webkit-scrollbar-thumb{
        background:#f4f9fc;
        border-radius:4px;
    }
    #wp::-webkit-scrollbar-corner {
        background:#f4f9fc;
    }
    #wp::-webkit-scrollbar-resizer  {
        background:#f4f9fc;
	}
</style> 
</head> 
<body> 
<div class="wrapper" id="wp"> 
	<div class="left">左侧固定宽度200px
    	<p>请选择Webkit内核的浏览器才可以正常的看到滚动条的变化。
                小天地，大世界是一个Web前端的技术博客。 主要是关于
                HTML 5,CSS 3,JavaScript,JQuery等。除此之外，还
                包含一些PHP语言等的实用例子。</p>
            <p>请选择Webkit内核的浏览器才可以正常的看到滚动条的变化。
                小天地，大世界是一个Web前端的技术博客。 主要是关于
                HTML 5,CSS 3,JavaScript,JQuery等。除此之外，还
                包含一些PHP语言等的实用例子。</p>
            <p>请选择Webkit内核的浏览器才可以正常的看到滚动条的变化。
                小天地，大世界是一个Web前端的技术博客。 主要是关于
                HTML 5,CSS 3,JavaScript,JQuery等。除此之外，还
                包含一些PHP语言等的实用例子。</p>
            <p>请选择Webkit内核的浏览器才可以正常的看到滚动条的变化。
                小天地，大世界是一个Web前端的技术博客。 主要是关于
                HTML 5,CSS 3,JavaScript,JQuery等。除此之外，还
                包含一些PHP语言等的实用例子。</p>
            <p>请选择Webkit内核的浏览器才可以正常的看到滚动条的变化。
                小天地，大世界是一个Web前端的技术博客。 主要是关于
                HTML 5,CSS 3,JavaScript,JQuery等。除此之外，还
                包含一些PHP语言等的实用例子。</p>
    </div> 
	<div class="right"> 
		<div class="content"> 
右侧宽度自动适应
			<p>请选择Webkit内核的浏览器才可以正常的看到滚动条的变化。
                小天地，大世界是一个Web前端的技术博客。 主要是关于
                HTML 5,CSS 3,JavaScript,JQuery等。除此之外，还
                包含一些PHP语言等的实用例子。</p>
            <p>请选择Webkit内核的浏览器才可以正常的看到滚动条的变化。
                小天地，大世界是一个Web前端的技术博客。 主要是关于
                HTML 5,CSS 3,JavaScript,JQuery等。除此之外，还
                包含一些PHP语言等的实用例子。</p>
            <p>请选择Webkit内核的浏览器才可以正常的看到滚动条的变化。
                小天地，大世界是一个Web前端的技术博客。 主要是关于
                HTML 5,CSS 3,JavaScript,JQuery等。除此之外，还
                包含一些PHP语言等的实用例子。</p>
            <p>请选择Webkit内核的浏览器才可以正常的看到滚动条的变化。
                小天地，大世界是一个Web前端的技术博客。 主要是关于
                HTML 5,CSS 3,JavaScript,JQuery等。除此之外，还
                包含一些PHP语言等的实用例子。</p>
            <p>请选择Webkit内核的浏览器才可以正常的看到滚动条的变化。
                小天地，大世界是一个Web前端的技术博客。 主要是关于
                HTML 5,CSS 3,JavaScript,JQuery等。除此之外，还
                包含一些PHP语言等的实用例子。</p> 
		</div> 
	</div> 
</div> 
</body> 
</html>