鱼C论坛

 找回密码
 立即注册
查看: 2449|回复: 6

[技术交流] html5 body标签

[复制链接]
发表于 2020-4-9 14:17:12 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能^_^

您需要 登录 才可以下载或查看,没有账号?立即注册

x
为什么写在body内的元素div不被body所包容?
以至于设定的 底部留白 不处在页面最底端

html:
<!doctype html>
<html lang="zh-CN">
        <head>
        <meta charset='utf-8'>
        <title>start</title>
        
        <link rel='shortcut icon' href='../image/ico/start.ico'/>
        <link rel='stylesheet' type='text/css' href='start.css'>
        
        </head>

        <body>
                <div class = 'top'>
                        <div class = 'start'><a  href='start.html'>
                                <img src='../image/ico/start.ico' alt='MyDream'/>
                                <p class = 'mydream'>MyDream</p></a>
                        </div>
                </div>
                <div class = 'title'>
                        <h1>欢迎来到我的私人网站</h1>
                        <h2>Welcome To My Private Website</h2>
                </div>
            <div class = 'bodyx'>
                        <div class = 'big'>
                                <p>作者:白居易</p>
                                <p>汉皇重色思倾国,御宇多年求不得。</p>
                                <p>杨家有女初长成,养在深闺人未识。</p>
                                <p>天生丽质难自弃,一朝选在君王侧。</p>
                                <p>回眸一笑百媚生,六宫粉黛无颜色。</p>
                                <p>春寒赐浴华清池,温泉水滑洗凝脂。</p>
                                <p>侍儿扶起娇无力,始是新承恩泽时。</p>
                                <p>云鬓花颜金步摇,芙蓉帐暖度春宵。</p>
                                <p>春宵苦短日高起,从此君王不早朝。</p>
                                <p>承欢侍宴无闲暇,春从春游夜专夜。</p>
                                <p>后宫佳丽三千人,三千宠爱在一身。</p>
                                <p>金屋妆成娇侍夜,玉楼宴罢醉和春。</p>
                                <p>姊妹弟兄皆列土,可怜光彩生门户。</p>
                                <p>遂令天下父母心,不重生男重生女。</p>
                                <p>骊宫高处入青云,仙乐风飘处处闻。</p>
                                <p>缓歌慢舞凝丝竹,尽日君王看不足。</p>
                                <p>渔阳鼙鼓动地来,惊破霓裳羽衣曲。</p>
                                <p>九重城阙烟尘生,千乘万骑西南行。</p>
                                <p>翠华摇摇行复止,西出都门百余里。</p>
                                <p>六军不发无奈何,宛转蛾眉马前死。</p>
                                <p>花钿委地无人收,翠翘金雀玉搔头。</p>
                                <p>君王掩面救不得,回看血泪相和流。</p>
                                <p>黄埃散漫风萧索,云栈萦纡登剑阁。</p>
                                <p>峨嵋山下少人行,旌旗无光日色薄。</p>
                                <p>蜀江水碧蜀山青,圣主朝朝暮暮情。</p>
                                <p>行宫见月伤心色,夜雨闻铃肠断声。</p>
                                <p>天旋地转回龙驭,到此踌躇不能去。</p>
                                <p>马嵬坡下泥土中,不见玉颜空死处。</p>
                                <p>君臣相顾尽沾衣,东望都门信马归。</p>
                                <p>归来池苑皆依旧,太液芙蓉未央柳。</p>
                                <p>芙蓉如面柳如眉,对此如何不泪垂。</p>
                                <p>春风桃李花开夜,秋雨梧桐叶落时。</p>
                                <p>西宫南内多秋草,落叶满阶红不扫。</p>
                                <p>梨园弟子白发新,椒房阿监青娥老。</p>
                                <p>夕殿萤飞思悄然,孤灯挑尽未成眠。</p>
                                <p>迟迟钟鼓初长夜,耿耿星河欲曙天。</p>
                                <p>鸳鸯瓦冷霜华重,翡翠衾寒谁与共。</p>
                                <p>悠悠生死别经年,魂魄不曾来入梦。</p>
                                <p>临邛道士鸿都客,能以精诚致魂魄。</p>
                                <p>为感君王辗转思,遂教方士殷勤觅。</p>
                                <p>排空驭气奔如电,升天入地求之遍。</p>
                                <p>上穷碧落下黄泉,两处茫茫皆不见。</p>
                                <p>忽闻海上有仙山,山在虚无缥渺间。</p>
                                <p>楼阁玲珑五云起,其中绰约多仙子。</p>
                                <p>中有一人字太真,雪肤花貌参差是。</p>
                                <p>金阙西厢叩玉扃,转教小玉报双成。</p>
                                <p>闻道汉家天子使,九华帐里梦魂惊。</p>
                                <p>揽衣推枕起徘徊,珠箔银屏迤逦开。</p>
                                <p>云鬓半偏新睡觉,花冠不整下堂来。</p>
                                <p>风吹仙袂飘飖举,犹似霓裳羽衣舞。</p>
                                <p>玉容寂寞泪阑干,梨花一枝春带雨。</p>
                                <p>含情凝睇谢君王,一别音容两渺茫。</p>
                                <p>昭阳殿里恩爱绝,蓬莱宫中日月长。</p>
                                <p>回头下望人寰处,不见长安见尘雾。</p>
                                <p>惟将旧物表深情,钿合金钗寄将去。</p>
                                <p>钗留一股合一扇,钗擘黄金合分钿。</p>
                                <p>但教心似金钿坚,天上人间会相见。</p>
                                <p>临别殷勤重寄词,词中有誓两心知。</p>
                                <p>七月七日长生殿,夜半无人私语时。</p>
                                <p>在天愿作比翼鸟,在地愿为连理枝。</p>
                                <p>天长地久有时尽,此恨绵绵无绝期。</p>
                        </div>
                        <div class = 'bottom'>底部留白</div>
            </div>
                
        </body>
</html>
css:
body{
        position:relative;
}

.top{
        position:fixed;
        top:0px;
}

.start{
        margin:6px;
        transform:translateX(60%);
        width:160px;
        height:48px;
        background-color:blue;
}

.mydream{
        font-size:18px;
        float:right;
        margin-top:12px;
        margin-right:10%;
}

.title{
        padding-top:20px;
        padding-bottom:20px;
        margin-bottom:10px;
        background-size:100% 100%;
        color:rgb(0,160,250);
        border-bottom-style:solid;
        border-bottom-color:rgb(0,20,120);
}

h1{
        text-align:center;
        font-size:300%;
}

h2{
        text-align:right;
        transform:translateX(-30%);
}

div.bodyx{
        position:relative;
}

div.big{
        position:absolute;
        left:20%;
        right:20%;
        text-align:center;
        background-color:yellow;
        font-size:300%;
        margin-bottom:50px;
}

div.bottom{
        background-color:rgb(255,255,255);
        position:absolute;
        bottom:0;
        width:100%;
}
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

 楼主| 发表于 2020-4-9 14:56:26 | 显示全部楼层
liuzhengyuan 发表于 2020-4-9 14:44
神马意思???没明白

现在这发帖不能发图真是太不方便了
主要问题是:
body不包含div.big
所以div.bottom只会出现在title的下方
而不是div.big的下方
问题原因我自己找到了:
position:absolute会使元素脱离文档流
将div.big独立于body之外
所以div.bottom基于文档流的定位-div.big的下方
因为文档流内div.big的消失而变成div.title的下方
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

 楼主| 发表于 2020-4-9 14:20:06 | 显示全部楼层
那个div.big不在body内,然后div.bottom直接以body为基准出现在body的底部而不是div.big的底部
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2020-4-9 14:44:57 | 显示全部楼层
神马意思???没明白
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

 楼主| 发表于 2020-4-9 14:58:59 | 显示全部楼层
所以position:absolute就是个坑,脱离文档流之后的定位布局会变得更难以操控,轻易不要使用
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2020-4-10 11:36:16 | 显示全部楼层
未有名 发表于 2020-4-9 14:56
现在这发帖不能发图真是太不方便了
主要问题是:
body不包含div.big

能发图
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2020-4-10 12:56:01 | 显示全部楼层

他等级不够发不了。。
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-12-23 09:01

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表