^-^菜鸟求教---当网页很长时，posiontion定位的不方便问题解决办法

zxleezx 2012-02-24 05:47:46
当网页height值很大时，那么#header和#footer中间的#container部分定位问题：

当把#container相对定位后，让其里面的所有div均继承，这时里面的div内容老是以#container进行绝对定位，计算就会比较

繁琐，哪位高手能不能教教我怎么再进行#shop # food #info #fun 等盒子的定位（这四个盒子直排下来即可）

=====================================================================================
上代码：
html部分：

<!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" />
<link rel="stylesheet" type="text/css" href="style/layout.css"/>
<title>栗子</title>
</head>

<body>
<div id="header">
<div id="header_top">header_top</div>
<div id="title">title</div>
<div id="navMenu">navMenu</div>
</div>

<div id="container">
<div id="flash_info">flash_info</div>
<div id="info_list">info_list</div>
<div id="board">board</div>
<div id="ad_1">ad_1</div>

<div id="shop"></div>
<div id="food">food</div>
<div id="info">info</div>
<div id="fun">fun</div>
</div>

<div id="footer">footer</div>
</body>
</html>
===========================================================================================
css部分：

/*---------date----2012-2-24--------*/


/*---------base--------*/
*{
margin:0;
padding:0;
}
body{
font-size:12px;
width:960px;
margin:0 auto;
position:relative;
}
ul{
list-style-type:none;
}
a:link{
text-decoration:none;
}

a:hover{
text-decoration:underline;
}

/*--------------header------------*/
#header{
height:169px;
width:960px;
margin:0 auto;
position:relative;
}
#header #header_top{
height:29px;
background:maroon;
}
#header #title{
height:100px;
background:green;
}
#header #navMenu{
height:40px;
background:orange;
}
/*------------container------------*/
#container{
position:relative;
background:1px solid gray;
margin-top:10px;
border:1px solid gray;
height:1000px;
}
#container #flash_info{
position:absolute;
background:purple;
height:171px;
width:710px;
}
#container #info_list{
margin-top:10px;
position:absolute;
left:0;
top:171px;
background:pink;
height:400px;
width:710px;
}
#container #board{
position:absolute;
left:720px;
top:0;
background:gray;
height:250px;
width:238px;
}
#container #ad_1{
position:absolute;
left:720px;
top:260px;
background:green;
height:320px;
width:238px;
}
#container #shop{

}
#container #food{

}
#container #info{

}
#container #fun{

}
/*------------footer------------*/
#footer{
margin-top:10px;
background:gray;
height:100px;
}
...全文
105 9 打赏 收藏 转发到动态 举报
写回复
用AI写文章
9 条回复
切换为时间正序
请发表友善的回复…
发表回复
luzuocheng_1503 2012-02-29
  • 打赏
  • 举报
 回复
同学，一般情况下别用position:absolute; 我就是不到万不得已才会用，

我把你的 position:absolute; 都去掉后，你页面乱了，

你要分清楚，左边就是左边，右边就是右边。。。

还有是不是 info_list 会变高么？还是就是那么高这个就好搞了



<!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" />

<link rel="stylesheet" type="text/css" href="style/layout.css"/>

<title>栗子</title>

<style>

/*---------date----2012-2-24--------*/





/*---------base--------*/

*{

margin:0;

padding:0;

}

body{

font-size:12px;

width:960px;

margin:0 auto;

}

ul{

list-style-type:none;

}

a:link{

text-decoration:none;

}



a:hover{

text-decoration:underline;

}



/*--------------header------------*/

#header{

height:169px;

width:960px;

margin:0 auto;

}

#header #header_top{

height:29px;

background:maroon;	

}	

#header #title{

height:100px;

background:green;	

}

#header #navMenu{

height:40px;

background:orange;	

}

/*------------container------------*/

#container{



background:1px solid gray;

margin-top:10px;

border:1px solid gray;

height:1000px;

}

#container #flash_info{



background:purple;

height:171px;

width:710px;

}

#container #info_list{

margin-top:10px;

background:pink;

height:400px;

width:710px;

}

#container #board{

background:gray;

height:250px;

width:238px;	

}

#container #ad_1{

background:green;

height:320px;

width:238px;

}

#container #shop{

background:green;

clear:both;

}

#container #food{

background:green;

}

#container #info{

background:green;

}

#container #fun{

background:green;

}

/*------------footer------------*/

#footer{

margin-top:10px;

background:gray;

height:100px;

}</style>

</head>



<body>

<div id="header">

<div id="header_top">header_top</div>

<div id="title">title</div>

<div id="navMenu">navMenu</div>	

</div>



<div id="container">

    <div style="float:left;">

        <div id="flash_info">flash_info</div>

        <div id="info_list">info_list</div>

    </div>

    <div style="float:right;">

        <div id="board">board</div>

        <div id="ad_1">ad_1</div>

    </div>



    <div id="shop">shop</div>

    <div id="food">food</div>

    <div id="info">info</div>

    <div id="fun">fun</div>





</div>



<div id="footer">footer</div>

</body>

</html>

看看是不是呢
zxleezx 2012-02-29
  • 打赏
  • 举报
 回复
哦，谢谢了
小昭 2012-02-27
  • 打赏
  • 举报
 回复
一般不会全部用绝对定位的。只有小个别元素才会，其他都用文档流或float。
我目前是没遇过楼主所说的问题。
Acesidonu 2012-02-24
  • 打赏
  • 举报
 回复
一般都是float
zxleezx 2012-02-24
  • 打赏
  • 举报
 回复
哦，好的
oggmm 2012-02-24
  • 打赏
  • 举报
 回复
relative会保留在文档流中的位置，而absolute会溢出当前文档流独立显示，通过top left right bottom来定义他跟参考点的距离来定它的位置。很多时候根据具体的需要我们需要absolute去定位，一般情况可以按照文档流的自然的位置去排版就好了

至于布局的一些东西 你可以到网上找一些常见的布局的比较好的实现方式看看，很早之前看到过一个讲得比较好的，现在想不起也找不着是那个网站了
zxleezx 2012-02-24
  • 打赏
  • 举报
 回复
[Quote=引用 1 楼 oggmm 的回复:]

#header #container #footer
这三个是上中下布局 其实你可以不定义他们的position为relative，除非它的子元素（absolute）需要它做为作为参考点 但是好像你并不想要

我也不知道你的container的元素为什么都要定义成absolute，你定义了absolute之后他们都脱离原来位置了 定位就只能通过left top之类的去定义

当某个元……
[/Quote]
脱离原来位置了？不是浮动才会脱离文档流吗?那么你觉得怎么定位最好呢？诚心求教……
oggmm 2012-02-24
  • 打赏
  • 举报
 回复
#header #container #footer
这三个是上中下布局 其实你可以不定义他们的position为relative，除非它的子元素（absolute）需要它做为作为参考点 但是好像你并不想要

我也不知道你的container的元素为什么都要定义成absolute，你定义了absolute之后他们都脱离原来位置了 定位就只能通过left top之类的去定义

当某个元素被定义为absolute之后 这个元素就会一直往上找参考点（比如定义了relative的父元素），找到时就以它为参考点，找不到就继续往上找 知道body
SpringBoot微服务知识体系与RabbitMQ深入实战-菜鸟成神之路
特别是SpringBoot项目的开发，之后会进入第二个课程：RabbitMQ的实战，即消息中间件在实际项目或者系统中各种业务模块的实战并解决一些常见的典型的问题！核心的知识点分别包括 一、SpringBoot实战历程课程 （1）...
算法-动态规划 Dynamic Programming--从菜鸟到老鸟
相对于我来说，算法里面遇到的问题里面感觉最难的也就是动态规划（Dynamic Programming）算法了，于是花了好长时间，查找了相关的文献和资料准备彻底的理解动态规划（Dynamic Programming）算法。一是帮助自己总结...
小白的Scrapy入门之路 ----爬取菜鸟教程的python页面
小白的Scrapy入门之路 ----爬取菜鸟教程的python页面 这是我的第一篇博文，不当之处请各位大神指教 &nbsp;&nbsp;话不多说，让我们进入正题吧！ &nbsp;&nbsp;安装 &nbsp;&nbsp;首先，少不了...
媳妇儿让我给她找一个PDF转word免费工具，找了半天我决定给她写一个出来^-^
既然网上不能找到好用的免费工具那就直接来写一个吧。人生苦短，我用python。 万能的python肯定应该有关于这个第三方库，百度了一下果不其然——PDFminer3k（如果你用的是python2的话那你应该使用的是pdfminer）。 ...
Ubuntu sudo apt-get install 出现“E: 无法定位软件包问题”解决方法汇总
Ubuntu sudo apt-get install 后出现“E: 无法定位软件包问题”解决汇总 **1 直接输入 sudo apt-get update ** 看到有好多是说这种解决方法的 但是对于我是没有效果的 本菜鸟用的是 Ubuntu 18.04 的；感觉还...
CSS

61,112

社区成员

60,730

社区内容

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章