示例效果：

1.主体内容的divMain 水平居中；

2.divLeft 靠近divMain ，位置固定，不随垂直滚动条而动；

相关代码：

<html>

<head runat="server">

    <title>设置靠近主体内容的左侧固定位置的Div</title>

<style>

#divLeft

{

    position:fixed;/* 固定位置 */

    top:200px;

    border:solid 1px #ccc;

    width:150px;

    height:500px;

}    

#divMain{

     width:918px;

     height:2000px;

     border:solid 1px #ccc;

     margin:0 auto;/* 水平居中 */

}

</style>

</head>

<body  onresize="setDivLeftPosition();" >

<div id="divMain">

</div>

<div id="divLeft">

    左侧固定位置

</div>

</body>

</html>

<script  type="text/javascript">

    //动态调整左侧Div的位置

    function setDivLeftPosition() {

        var divMain = document.getElementById("divMain");

        document.getElementById("divLeft").style.left = (divMain.offsetLeft - 155) + "px";

    }

    setDivLeftPosition();

    //        var top, left;

    //        if (div.currentStyle) { left = div.currentStyle.left; top = div.currentStyle.top; }

    //        else if (window.getComputedStyle) { left = window.getComputedStyle(div, null).left; top = window.getComputedStyle(div, null).top; }

    //        alert(left + "," + top);

</script>

设置靠近 水平居中的主体内容Div 的 左侧位置固定的Div的更多相关文章

  1. JQuery实现点击div以外的位置隐藏该div窗口

    简单示例代码: <body> <script type="text/javascript" src="http://ajax.googleapis.co ...

  2. div box container随主体内容自动扩展适应的实现

    /**顶部部分*/ .con-tl{ background:url(../images/left.png) no-repeat 0 0 rgba(0, 0, 0, 0); padding-left: ...

  3. SharePoint 2010 master page 控件介绍(3) :页面主体内容

    转:http://blog.csdn.net/lgm97/article/details/6409217 <!-- =====  页面滚动区域开始  ====================== ...

  4. 设置一个元素的HTML内容

    问题 你需要一个元素中的HTML内容 方法 可以使用Element中的HTML设置方法具体如下: Element div = doc.select("div").first(); ...

  5. Position a child div relative to parent container in CSS: [设置 子DIV位置 跟 父DIV相关联]

    最近调DIV的位置比较头疼,各种position: relative / absolute google到一篇好文章[http://www.webdevdoor.com/html-css/css-po ...

  6. 内容高度小于窗口高度时版权div固定在底部

    <!doctype html><html><head><meta charset="utf-8"><title>文档内容 ...

  7. 设置cxGrid中RichEdit输入内容的格式

    设置cxGrid中RichEdit输入内容的格式 (2013-09-05 23:25:31) 转载▼红鱼儿新浪博客   分类: Delphi 遇到这样的问题,利用cxGrid,将一列定义为RichEd ...

  8. jQuery.ajax() 设置 Headers 中的 Accept 内容

    jQuery.ajax() 如何设置 Headers 中的 Accept 内容   其实很简单,首先如果是常见类型,则请直接设置 dataType 属性 $.ajax({ dataType: &quo ...

  9. 大div中，三个小div水平居中

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. 使用Mybatis-Generator自动生成Dao、Model、Mapping相关文件(转)-----https://www.cnblogs.com/smileberry/p/4145872.html

    https://www.cnblogs.com/smileberry/p/4145872.html 使用Mybatis-Generator自动生成Dao.Model.Mapping相关文件(转)

  2. HDU 1224 无环有向最长路

    用bellman_ford的方法,将中间不断取较小值,修改为取较大值就可以了 #include <cstdio> #include <cstring> #include < ...

  3. noip模拟赛 密码

    题目描述 YJC把核弹发射密码忘掉了……其实是密码被加密了,但是YJC不会解密.密码由n个数字组成,第i个数字被加密成了如下形式:第k小的满足(2^L)|(P-1)且P为质数的P.YJC希望你能帮他算 ...

  4. UVa - 12617 - How Lader

    先上题目:   How Lader  Lader is a game that is played in a regular hexagonal board (all sides equal, all ...

  5. [BZOJ1096][ZJOI2007]仓库建设（斜率优化DP）

    题目:http://www.lydsy.com:808/JudgeOnline/problem.php?id=1096 分析: 假设1~10,如果在3 6 10建立仓库,那么当前建立仓库决策下的最优值 ...

  6. Spring Boot在开发时实现热部署（开发时修改文件保存后自动重启应用）（spring-boot-devtools）

    热部署是什么 大家都知道在项目开发过程中,常常会改动页面数据或者修改数据结构,为了显示改动效果,往往需要重启应用查看改变效果,其实就是重新编译生成了新的Class文件,这个文件里记录着和代码等对应的各 ...

  7. golang 的GOPATH设置的问题

    go run footer.go 的时候呢, go会依次去GOPATH 和GOROOT设置的对应路径下面找对应的包(目录和文件) 找的时候呢, 会在GoPATH 和GOROOT对应的目录后面再加一层路 ...

  8. 数据切分——Atlas介绍

    Atlas是由 Qihoo 360公司Web平台部基础架构团队开发维护的一个基于MySQL协议的数据中间层项目.它在MySQL官方推出的MySQL-Proxy 0.8.2版本号的基础上,改动了大量bu ...

  9. java中commons-beanutils的介绍

    1.   概述 commons-beanutil开源库是apache组织的一个基础的开源库.为apache中很多类提供工具方法.学习它是学习其它开源库实现的基础. Commons-beanutil中包 ...

  10. 【JAVA】两点经纬度直线距离的计算

    来自谷歌地图的计算公式: 通过JAVA的Math类各种方法调用.实现上述公式 private static double EARTH_RADIUS = 6378.137;// 单位千米 /** * 角 ...