html – 100%高度div,由于margin-top 50px,滚动条50px关闭屏幕.
发布时间:2020-12-14 19:35:55 所属栏目:资源 来源:网络整理
导读:我正在尝试布局一个页面,该页面在顶部和内容区域有一个水平导航栏,当内容太大时,它将获得滚动条. 我目前的做法是div宽度100%;身高50px;绝对的位置;前0;左0;然后是第二个高度为100%的div;宽度100%; margin-top 50px;溢出:汽车;但是,出现的滚动条会被50px
我正在尝试布局一个页面,该页面在顶部和内容区域有一个水平导航栏,当内容太大时,它将获得滚动条.
我目前的做法是div宽度100%;身高50px;绝对的位置;前0;左0;然后是第二个高度为100%的div;宽度100%; margin-top 50px;溢出:汽车;但是,出现的滚动条会被50px的边距所抵消,因此会将内容从页面底部推出.如果我删除边距它一切正常但它将内容放在导航栏后面. 我也尝试将它包装在一个容器中进行试验,将边缘和溢出物放在孩子身上,但这似乎仍然没有达到要求的效果. jsFiddle,有评论尝试更好地解释它. http://jsfiddle.net/Piercy/hggXJ/ HTML <div id="nav"> <h1>Navigation</h1> </div> <!-- <div id="contentContainer"> --> <div id="content"> <div id="oversizeContent"> <p>You can see the black border on this green box,but you cannot see the bottom black border. Similarly you cannot see the bottom arrow of the scrollbar.</p> <p>I tried putting a wrapper around the content and putting the margin on that but the scrollbar still over flows Uncomment the contentContainer div and comment/uncomment the corresponding css.</p> </div> </div> <!-- <div> --> CSS html,body { height:100%; overflow:hidden; color:white; font-weight:bold; } #nav { height:50px; width:100%; background-color:red; position:absolute; top:0; left:0; z-index: 2; } #contentContainer { /* uncomment this if you bring #contentContainer into play */ /* margin-top:50px; position:absolute; top:0; left:0; */ height:100%; width:100%; } #content { /* moving this into #contentContainer doesnt help either */ /* comment this if you bring #contentContainer into play */ margin-top:50px; position:absolute; top:0; left:0; width:100%; height:100%; background-color:blue; z-index: 1; overflow: auto; } #oversizeContent { background-color:green; width:400px; height:1000px; border:10px solid black; } 解决方法
而不是高度:100%;做底:0;如果没有容器设置为position:relative,它将转到相对父或视口的底部;
DEMO (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |