示例效果：

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. 分金币 （UVA 11300）

    http://acm.hust.edu.cn/vjudge/problem/viewProblem.action?id=33899 思路:推公式,发现可以转化为求给定n个数,求到所有点距离之和最小的点 ...

  2. uva 1444 Knowledge for the masses

    uva 1444 Description   You are in a library equipped with bookracks that move on rails. There are ma ...

  3. Leetcode 115.不同的子序列

    不同的子序列 给定一个字符串 S 和一个字符串 T,计算在 S 的子序列中 T 出现的个数. 一个字符串的一个子序列是指,通过删除一些(也可以不删除)字符且不干扰剩余字符相对位置所组成的新字符串.(例 ...

  4. C#装饰模式

    using System;using System.Collections.Generic;using System.Text; namespace 装饰模式{    class Person    ...

  5. 夜话JAVA设计模式之单例模式（单件模式Singleton）

    单例模式也叫单件模式,就是确保一个类只有一个实例,并提供一个全局访问点. 设计成单例即把某个类设计成我们自己管理的单独实例,避免实例对象的重复创建,我们只有通过单例类的全局访问点获取实例. 下面来看金 ...

  6. Ubuntu 16.04粘贴板增强工具Parcellite

    默认在Ubuntu已经有粘贴板增强工具,比如保存最近五个的复制文本历史. 1.系统默认 使用:[Ctrl]+[;] 然后用数字进行选择即可,但是只支持文本,只能保存最近5次 2.安装Parcellit ...

  7. session知识点总结

    1.session生成条件是怎样的?是登陆成功才生成?还是请求进来就生成session和sessionid? 答:Tomcat只要进来请求,就会生成session,同一个ip request来源用的都 ...

  8. DIY.NETORM框架——总体分析

    一.故事 近些年一直开发MIS系统,用过PB,VB,C#  .如今学了半年的java,早先听人说,.NET和 java一直就是互相借鉴.一起升级.都是为了让程序开发趋于简单,高校,而这不可避免就肯定用 ...

  9. ios 从rgb array生成UIImage并显示,oc版

    ; ; const size_t Area = Width * Height; ; // rgba std::vector<uint8_t> output(Area*channles); ...

  10. 阿里大数据比赛sesson2_RF&amp;GBRT（下）

    -----------__-----------接上文---------__---------- 2.Xlab RF上手 2.1.训练特征表准备 训练的特征表gbrt_offline_section_ ...