html5 body标签
为什么写在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'><ahref='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%;
} 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的下方 那个div.big不在body内，然后div.bottom直接以body为基准出现在body的底部而不是div.big的底部 神马意思？？？没明白{:10_277:} 所以position:absolute就是个坑，脱离文档流之后的定位布局会变得更难以操控，轻易不要使用 未有名 发表于 2020-4-9 14:56
现在这发帖不能发图真是太不方便了
主要问题是：
body不包含div.big
能发图 小脑斧 发表于 2020-4-10 11:36
能发图
他等级不够发不了。。
页:
[1]