CSS项目随记

关注微信公众号【行走在代码行的寻路人】获取Java学习视频及资料。

一、解决IE下不支持overflow: inherit;

解决方法：在父对象属性加上position: absolute; 

二、让div浮动跟随滚动条移动

position: fixed;

三、内容置顶

style="vertical-align: top;"

四、固定table的行和列

/**固定在顶部**/
.node_top_fixed{
	white-space: nowrap;
	z-index: 20;
	position: relative;
}
/**固定在左边**/
.node_level_locked{
	z-index: 10; 
	position: relative; 
}
/**顶部左边都固定**/
.node_top_left_fixed{
	z-index: 30;
	position: relative;
}

 

 

 

<script type="text/javascript">
$(document).ready(function(){
	$("#base_table_div").scroll(function(){
		var yheight = $("#base_table_div").scrollTop();
		var xwidth = $("#base_table_div").scrollLeft()
		
		$(".node_top_left_fixed").css("top", yheight-1 + "px");
		$(".node_top_left_fixed").css("left", xwidth-1 + "px");
	    $(".node_top_fixed").css("top", yheight-1 + "px");
	    $(".node_level_locked").css("left", xwidth-1 + "px");
	});
});
</script>

四、自定义滚动条样式

.base_table_div {
	margin-left: 10px;
	margin-right: 10px;
	height:600px;  
    width:99%;  
    overflow-x:auto;  
    overflow-y:auto; 
    scrollbar-face-color:#EEEEEE;/*那三个小矩形的背景色*/
    scrollbar-base-color:#FFFFFF;/*那三个小矩形的前景色*/
    scrollbar-arrow-color:#AAAAAA;/*上下按钮里三角箭头的颜色*/
    scrollbar-track-color:#FFFFFF;/*滚动条的那个活动块所在的矩形的背景色*/
    scrollbar-highlight-color:#EEEEEE;/*那三个小矩形左上padding的颜色*/
    scrollbar-shadow-color:#CCCCCC;/*那三个小矩形右下padding的颜色*/
    scrollbar-3dlight-color:#CCCCCC;/*那三个小矩形左上border的颜色*/
    scrollbar-darkshadow-Color:#CCCCCC;/*那三个小矩形右下border的颜色*/
}