怎么让DIV标签固定在一个地方不随游览器的滚动而滚动???

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了怎么让DIV标签固定在一个地方不随游览器的滚动而滚动???相关的知识,希望对你有一定的参考价值。

或者让div 标签随着游览器的滚动而和合理的滚动这个要怎么做a ??

参考技术A <html>
<head>
<meta http-equiv="Content-Type" c>
<title>webkey.cn</title>
<style>
body
overflow: hidden;
padding: 0;
margin: 0;

div#wrap_outer
width: 100%;
height: 100%;
overflow: auto;
padding: 0px 30px 30px 30px;

#glideDiv0

position: absolute;
top: 50;
left:0;
z-index:200;
width:28px;
background-color:#E6EEE7;

</style>
</head>
<body>
<div id="wrap_outer">
<!-- layers that slide go here.
Be sure to include id for each layer in style sheet in head -->
<br/><br/>固定Div,且scroll时Div不闪动。
<br/><br/>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
<br/><br/>aaaa
<br/><br/>aaaa
<br/><br/>aaaa
<br/><br/>aaaa
<br/><br/>aaaa
<br/><br/>aaaa
<br/><br/>aaaa
<br/><br/>aaaa
<br/><br/>aaaa
<br/><br/>aaaa
<br/><br/>aaaa
<br/><br/>aaaa
<br/><br/>aaaa
<br/><br/>aaaa
<br/><br/>aaaa
<br/><br/>aaaa
<br/><br/>aaaa
<br/><br/>aaaa
<br/><br/>aaaa
<br/><br/>aaaa
<br/><br/>aaaa
<br/><br/>aaaa
<!-- end wrap_outer div--></div>
<div id="glideDiv0">
a<br/>
b<br/>
c<br/>
d<br/>
e<br/>
f<br/>
g<br/>
<br/>
</div>
</body>
</html>

如何设置CSS 让页面头部和底部固定 中间内容滚动?

就是头部贴页面顶部,底部贴页面底部。全屏的时候,刚好页面是没有滚动条的。
当页面缩小的时候,头部和底部还是固定在两头,让中间部分产生滚动条。

页面分成了三个部分,三个部分分开写在不同的页面里,然后调用。整体是这样的模式:
<div>
<% Html.RenderPartial("HeadUserControl"); %>
</div>

<div>

<asp:ContentPlaceHolder ID="MainContent" runat="server">
</asp:ContentPlaceHolder>
</div>

<div>
<% Html.RenderPartial("FootUserControl"); %>
</div>

怎麼弄也弄不好,朋友们救救命啊!先谢谢了!

  底部和头部分别定义两个div,在利用position:fixed;分别设置它们的位置。

  position 属性规定元素的定位类型。
  说明
  这个属性定义建立元素布局所用的定位机制。任何元素都可以定位,不过绝对或固定元素会生成一个块级框,而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。

  fixed
  生成绝对定位的元素,相对于浏览器窗口进行定位。
  元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
  
参考技术A I服了楼上的YOU们!

<style type="text/css">
<!--
html,body height: 100%;
body
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;

.top,.bottom
position: absolute;
width: 100%;
left: 0px;
height: 10%;
background-color: #000000;

.top top: 0px;
.bottom bottom: 0px;
.main
background-color: #00CC66;
overflow-y: scroll;
position: absolute;
top: 10%;
bottom: 10%;
height: 80%;
width: 100%;

-->
</style>
</head>

<body>
<div class="top">TOP</div>
<div class="bottom">BOTTOM</div>
<div class="main">CONT</div>
</body>

如果你要固定高度,将10%转换一下数值就可以了。具体的CSS写法忘了,你去查查了。
参考技术B <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
<!--
body
margin:0;
padding:0;

.top
position:fixed;
left:0;
top:0;
height:100px;
width:100%;
background:#000;

.main

background-color: #00CC66;

height: 1000px;
margin-top:100px;
margin-bottom:100px;
padding-bottom:20px;
width: 100%;

.bottom
position:fixed;
left:0;
bottom:0px;
height:100px;
width:100%;
background:#000;

/*IE6 fixed bug*/
* htmloverflow:hidden;
* html bodyoverflow:auto;margin:0;
* html .bottomposition:absolute;left:0;bottom:0px;
* html .topposition:absolute;left:0;top:0px;
-->
</style>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<body>
<div class="top">TOP</div>
<div class="main">
CONT
CONT
CONTCONT
CONT
CONT
CONT
<div style="margin-top:980px;color:#fff;">底部</div>
</div>
<div class="bottom">BOTTOM</div>
</body>
</html>

参考资料:http://www.losever.com/?s=div%2Bcss

本回答被提问者采纳
参考技术C DIV做这样的要配合JS,你用框架集做吧!效果一样的,你搜frameset ! 参考技术D 页面头部和底部的css样式用 position:fixed;

以上是关于怎么让DIV标签固定在一个地方不随游览器的滚动而滚动???的主要内容,如果未能解决你的问题,请参考以下文章

怎么让div内的某个元素固定不随div的滚动条的滚动而滚动?

如何让背景图片固定不随滚动条滚动

怎么让DIV固定在页面的某个位置而不随着滚动条随意滚动?

有两个div,一个父级,一个子级,父级有滚动条,样式如何写才能让子级的div固定在顶部,不随滚动条

css+div如何将淘宝客服悬浮固定在右下角,不随滚动条移动。

CSS布局,子级DIV固定定位于父级DIV的右侧,不随浏览器的滚动而滚动