[CSS]如何让一个DIV固定在另一个DIV的底部？

cds27 2005-10-12 04:23:08

如
<div id=div1>
<div id=div2></div>
</div>

div1的高度是动态的，有没有什么CSS可以让div2固定在底部？
类似于valign=bottom的效果

...全文

3125 15 打赏收藏转发到动态举报

写回复

15 条回复

切换为时间正序

请发表友善的回复…

发表回复

cds27 2005-10-19

打赏
举报

回复

3q all

indexroot 2005-10-15

打赏
举报

回复

<style>
#idParentDIV
{
width:100%;height:80px;padding:6px;background-color:buttonshadow;position:relative;
}

#idDIV
{
width:80%;height:40px;background-color:#FF6633;color:#FFFFFF;padding:4px;position:absolute;left:9px;bottom : 5%;
}
</style>

<div id=idParentDIV><div id=idDIV>Content</div></div>

cnvbb 2005-10-15

打赏
举报

回复

使用相对定位，
然后 bottom:0px;float:left;

meizz 2005-10-14

打赏
举报

回复

在楼上的这位兄弟的思路上发展一下：
<html>
<head>
<title>Test</title>
</head>
<body>
<div style="height:100%;width:100%;background-color:#ccc; margin-bottom: -30px">
<div style="height: 100%; padding-bottom: 30px;float: left">
Your Content
</div>
</div>
<div style="width:100%;background-color:#E00;height:30px;margin-top:-30px;">
Your Footer
</div>
</body>
</html>

meizz 2005-10-14

打赏
举报

回复

楼主的这位兄弟的 Your Footer 会盖住 Your Content 30px像素的东东。

24024846 2005-10-14

打赏
举报

回复

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN">
<head>
<title>Test</title>
</head>
<body>
<div style="height:100%;width:100%;background-color:#ccc;">
Your Content
</div>
<div style="width:100%;background-color:#333;height:30px;margin-top:-30px;">
Your Footer
</div>
</body>
</html>

BaSaRa_GIT 2005-10-14

打赏
举报

回复

用javascript试试

document.getElementById("divBottom").scrollHeight = document.getElementById("divUp").scrollHeight+"px";

让底层divBottom的滚动高度随着上面一层的高度变化而变化

当然要设置CSS的clear:both;vertical-align:bottom等等。。。

qidizi 2005-10-14

打赏
举报

回复

可以这样不?

<html>
<head>
<title>无标题</title>
<head>
<body>
<div id=div1 style="height:100%;border:1px solid red">
<div>这里放你的内容，你看这种模式行不行？<br>ddddddddddd</div>
<div id=div1 style="height:100%;border:1px solid red"></div>
<div id=div2>ddddddddddfffffffffffffffffffffffffffffffff</div>
</div>
</body>
</html>

wyunsh 2005-10-13

打赏
举报

回复

怎么实现一个浮动的页面？谢谢！

cds27 2005-10-13

打赏
举报

回复

其实我的div1是height:100%，也就是跟着IE的窗口变化而变化，所以说是动态的。

我的目的是想了解是否有JS、VBS以外的办法实现，如CSS。

meizz 2005-10-13

打赏
举报

回复

那就不要预设 div1 的高度不就成了！！

cds27 2005-10-13

打赏
举报

回复

感谢梅花兄的关注。

你说的那模式好象也不能把div2放到底部啊。
如果div1的高度>div+div2的高度，那div2就浮上去了。

meizz 2005-10-13

打赏
举报

回复

<div id=div1>
<div>这里放你的内容，你看这种模式行不行？</div>
<div id=div2></div>
</div>

sky 2005-10-13

打赏
举报

回复

啊，不会吧，我正想用这个功能呢，晕了。期待高高手呀。

meizz 2005-10-13

打赏
举报

回复

冰封呀，我花了很长时间，搞不定。期待高手！

本文向大家描述一下如何使用CSS方式实现DIV固定在网页底部，这个问题如果在以前使用表格布局，并不困难，只要给页面的最外层表格高度设置为100%就可以了，然而，在Web标准的规范中，表格的高度已经属于废止的属性，应该避免使用，所以使用CSS方法才是明智的选择。DIV固定在网页底部的CSS方法首先看这样一下问题：“如果有一个footer层，我想让他固定出现在整个页面的最下方，不随着页面中的内容而变化...

我有两个DIV元素,其中一个具有绝对位置(主DIV的左下角).第二个DIV是隐藏的,只有通过点击链接才能显示.我需要第二个出现在第一个下方.但由于第一个div的位置是绝对的,第二个位置出现在第一个div之上. my link //this is absolute positioned//this only appears after clicking on a linkCSS：div.wrappe...

CSS让一个盒子div永远在视图界面的最底部

底部固定的div。

#CSS.1 {position:relative;}.2 {position:absolute;left;0;bottom:0;}#HTML<div class="1"> <div class="2"></div></div>不影响其他元素的情况下定位最好...如果 DIV1 里只有 DIV2 的话在DIV2 CSS样式里加一个 margin...

61,115

社区成员

60,728

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

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

+ 用AI写文章