百度首页示例:

我给二维码,和下面文本固定位置

这时html代码

        <div id="bar_code">
<div class="img_put"></div>
<p>百度</p>
</div>
<div id="footer">
<p id="row_1">
<a href="#">百度设为主页</a>
<a href="#">关于百度</a>
<a href="#">About Baidu</a>
<a href="#">百度推广</a>
</p>
<p id="row_2">
<s>©2018 Baidu</s>
<a href="#">使用百度前必读 </a>
<a href="#"> 意见反馈</a>
<s>京ICP证030173号</s>
<i class="icon1"></i>
<a href="#" class="j_g">京公网安备11000002000001号</a>
<i class="icon2"></i> </p>
</div>

css(分别给他们设置了position:absolute)但是没有给他们的父级设置相对定位,这时他们以body为相对定位,没有改变窗口的时候一切都好好的

#bar_code{
position: absolute;
text-align: center;
bottom: 140px;
width: 100%;
height: 60px;
} .img_put{
display: inline-block;
width: 60px;
height: 60px;
background: url(../image/barCode.png) no-repeat;
background-size: 60px 60px; } #bar_code p{
color: #666;
font-weight:;
line-height: 23px;
padding: auto auto;
} #footer{
position: absolute;
bottom: 47px;
width: 100%;
line-height: 22px;
font-size: 12px;
text-align: center;
overflow: hidden;
} #footer a{
display: inline-block;
color: #999;
text-decoration: underline;
}
#row_1 a{
margin-left: 25px;
} #footer s{
color: #999;
}
.j_g{
margin-left: 25px;
}
#footer i{
display: inline-block;
width: 14px;
height: 17px;
margin: 0 3px -3px 0;
}
.icon1{
background: url(../image/icons.png) -600px -96px;
}
.icon2{
background: url(../image/icons.png) -623px -96px;
}

全部都皱成一团,那我们这时也可以给body设置一个最小高度和最小宽度避免出现这种情况,但是给body设置会造成很多不便的情况,比如我们又要往里面添东西,这时整个页面显得非常的限制

所以我们就给它的父级添上相对定位,和最小宽度,最小高度避免这种情况的出现

#content{
position: relative;
width: 100%;
text-align: center;
min-width: 810px;
height: 100%;
min-height: 600px; }

页面就会出现滚动轴,避免父级高度不够出现刚才皱成一团的情况

固定div的位置——不随窗口大小改变为改变位置的更多相关文章

  1. 0029 定位:position(相对、绝对、固定、绝对定位盒子居中、z-index、绝对定位改变display属性)

    目标 理解 能说出为什么要用定位 能说出定位的4种分类 能说出四种定位的各自特点 能说出我们为什么常用子绝父相布局 应用 能写出淘宝轮播图布局 1. CSS 布局的三种机制 网页布局的核心 -- 就是 ...

  2. 表格头部与左侧内容随滚动条位置改变而改变(基于jQuery)

    效果图如下: HTML代码: <!DOCTYPE html> <html lang="zh-CN"> <head> <meta chars ...

  3. fixedBox固定div漂浮代码 支持ie6以上大部分浏览器

    fixedBox固定div漂浮代码 支持ie6以上大部分浏览器 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//E ...

  4. js进阶 11-7 jquery如何获取和改变元素的位置

    js进阶 11-7  jquery如何获取和改变元素的位置 一.总结 一句话总结:jquery中匿名函数中的index参数是什么意思.jquery对象多集合,故index为所选元素的下标. 1.jqu ...

  5. css固定div头部 滚动条滚动内容

    页面布局,固定头部,滚动下方内容 实际场景 在制作页面的时候,经常会遇到要这样的情况:整个页面,整体分三大模块,头部固定,内容区域,左边固定,右边可以滚动. 最终想要的效果 案例源码 <!DOC ...

  6. 实现一个div,左边固定div宽度200px,右边div自适应

    实现一个div,左边固定div宽度200px,右边div自适应<div class= "container"> <div class="left&quo ...

  7. Python3 Selenium WebDriver网页的前进、后退、刷新、最大化、获取窗口位置、设置窗口大小、获取页面title、获取网页源码、获取Url等基本操作

    Python3 Selenium WebDriver网页的前进.后退.刷新.最大化.获取窗口位置.设置窗口大小.获取页面title.获取网页源码.获取Url等基本操作 通过selenium webdr ...

  8. android 动态改变控件位置和大小 .

    动态改变控件位置的方法: setPadding()的方法更改布局位置. 如我要把Imageview下移200px:             ImageView.setPadding( ImageVie ...

  9. Selenium WebDriver-网页的前进、后退、刷新、最大化、获取窗口位置、设置窗口大小、获取页面title、获取网页源码、获取Url等基本操作

    通过selenium webdriver操作网页前进.后退.刷新.最大化.获取窗口位置.设置窗口大小.获取页面title.获取网页源码.获取Url等基本操作 from selenium import ...

  10. Unity 如何在窗口大小可以随意改变的情况下让游戏世界完整的显示在镜头中

    当我们开发游戏时,如果是开发手机游戏,屏幕窗口的比例是固定的,不会说在运行时改变的. 但是,PC端的游戏就不一定,我希望它能被用户随意拉扯,但完整的内容还是能显示出来,这里我直接放例子: 请注意黑色的 ...

随机推荐

  1. EF中防止sql注入

    EF作为一个orm框架,本身以及放置了sql的注入,但是如果我们需要执行sql语句的时候了?比如,我们需要查询视图"select * from VM where 条件 = {0}" ...

  2. fedora23没有/var/log/messages &如何禁用后台自动更新软件?

    警告!! Linux是一个非常敏感的操作系统,若删除文件错误,很容易造成系统崩溃. fedora23没有/var/log/messages 不是没有messages这个文件,而是 从 fc core ...

  3. SP913 QTREE2 - Query on a tree II

    思路 第一个可以倍增,第二个讨论在a到lca的路径上还是lca到b的路径上, 倍增即可 代码 #include <cstdio> #include <algorithm> #i ...

  4. Kde桌面的Mac化

    KDE->Mac \(Mac\) 的审美可以说是很成熟了,确实让人很喜欢啊!于是不由得想弄一个 \(Mac\) 风的桌面. 先放张图吧: 效果还蛮不错的哇. \(Mac\) 原生的壁纸下载链接: ...

  5. Redis5.0+哨兵模式+Keepalived实现高可用

    Redis主备配置 原理: 从服务器向主服务器发出SYNC指令,当主服务器接到此命令后,就会调用BGSAVE指令来创建一个子进程专门进行数据持久化工作,也就是将主服务器的数据写入RDB文件中.在数据持 ...

  6. Visual Studio提示“无法启动IIS Express Web服务器”的解决方法 调试闪退

    有时,在使用Visual Studio运行ASP.NET项目时,会提示“无法启动IIS Express Web服务器”,无法运行,如图: 这一般出现在重装系统之后,或者项目是从别的电脑上复制过来的.解 ...

  7. node 之 Buffer 笔记

    1. Buffer 相关 js 最初是被设计来处理 html的,因此它不善于处理二进制数据,只有数值和字符串类型.而 node 是基于 js 的,因为 node 需要实现一些譬如数据库通信.操作图像及 ...

  8. mysql自增长主键,删除数据后,将主键顺序重新排序

    用数据库的时候,难免会删除数据,会发现设置的主键增长不是按照正常顺序排列,中间有断隔比如这样. 以我这个情况举例 处理方法的原理:删除原有的自增ID,重新建立新的自增ID. ALTER TABLE ` ...

  9. setTimeout setInterval 计时器

    setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式. 返回值:返回一个 ID(数字),可以将这个ID传递给 clearTimeout() 来取消执行. 案例: 点击按钮开始,停止时 ...

  10. CSS3 3D图片立方体旋转

    html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <titl ...