示例效果：

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. __repr__()

    class A : def __init__(self,name): self.name=name #def __str__(self): # return '**%s**'%self.name de ...

  2. ZOJ 3201 树形背包问题

    题目大意: 0~n-1号这n个点,每个点有个权值,由无向边形成了一棵树,希望在这棵树上找到一棵长为m的子树使总的权值最小 基本的树形背包问题 令dp[u][j] 表示u号节点对应子树中有j个节点所能得 ...

  3. 旅游电车(cogs 1175)

    [问题描述] Henryy国正致力于首都的一个旅游电车建设工程.首都有N个旅游景区.Henryy国的电车永远只沿道路规定的方向行驶,为了不使投入使用的电车有可能无法回到它的起始站,Henryy希望知道 ...

  4. Ubuntu下使用Sysvinit实现自定义服务（简单研究）

    通过上一篇文章http://www.cnblogs.com/EasonJim/p/7168216.html可以大概了解到Sysvinit的历史. 其实在自定义服务上,使用Sysvinit是最简单的,本 ...

  5. Spring关于使用注解@Configuration去配置FormattingConversionServiceFactoryBean来实现自定义格式字符串处理无效的问题（未找到是什么原因造成的）

    说明:在Spring MVC和Spring Boot中都能正常使用. 首先,我实现了一个自定义的注解,@Trimmed去除字符串String的前后空格. 如果是在Spring MVC的XML配置中,可 ...

  6. 【原创】分布式之缓存击穿 【原创】自己动手实现静态资源服务器 【原创】自己动手实现JDK动态代理

    [原创]分布式之缓存击穿   什么是缓存击穿 在谈论缓存击穿之前,我们先来回忆下从缓存中加载数据的逻辑,如下图所示 因此,如果黑客每次故意查询一个在缓存内必然不存在的数据,导致每次请求都要去存储层去查 ...

  7. java线程和线程池的使用

    java线程和线程池 一.创建多线程的方式 java多线程非经常见.怎样使用多线程,怎样创建线程.java中有两种方式,第一种是让自己的类实现Runnable接口.另外一种是让自己的类继承Thread ...

  8. Hibernate——三种状态的理解

    在Hibernate中有三种状态,对这三种状态的深入的理解,能够更好的理解Hibernate的执行机制. 在整个Hibernate中这三种状态是能够进行转换的. 1.Transient Object( ...

  9. 李洪强经典面试题30-iOS应用性能调优的25个建议和技巧

    iOS应用性能调优的25个建议和技巧 本文来自iOS Tutorial Team 的 Marcelo Fabri,他是Movile的一名 iOS 程序员.这是他的个人网站:http://www.mar ...

  10. JAVA学习第二十一课（多线程（一）) - (初步了解）

    放假在家,歇了好几天了,也没学习,今天学习一下多线程.找找感觉.后天就要回学校了.sad... PS:包 没有什么技术含量,会用就可以,日后开发就必需要会用啦,所以打算先放一放,先来多线程 一.多线程 ...