我的页面上有一个标题,刚好超过100px(确切地说是111px)它下面的div需要延伸到视口的底部,好像我已经将底部设置为0px.问题在于我无法在ie6(bug)中指定顶部和底部.
我可以指定顶部:111px或底部:0px,但我仍然需要高度正确,即.100%-111px,根据视口的大小.
似乎无法让表达式工作,似乎是解决方案
这是我的css代码:
position: absolute;
width: 200px;
top: 111px;
bottom: 0px;
Run Code Online (Sandbox Code Playgroud)
有什么建议?
Bla*_* M. 23
执行此操作的最佳方法是使用视图端口样式.它只是工作而不需要其他技术.
码:
div{
height:100vh;
}Run Code Online (Sandbox Code Playgroud)
<div></div>Run Code Online (Sandbox Code Playgroud)
ran*_*onE 22
我将height属性添加到body和html标签中.
HTML:
<body>
<div id="wrapper">
<div id="header">header</div>
<div id="content">content</div>
</div>
Run Code Online (Sandbox Code Playgroud)
CSS:
html, body
{
height: 100%;
min-height: 100%;
margin: 0;
padding: 0;
}
#wrapper
{
height: 100%;
min-height: 100%;
}
#header
{
height: 111px;
}
Run Code Online (Sandbox Code Playgroud)
或者,你可以使用position:absolute:
#content
{
position:absolute;
top: 111px;
bottom: 0px;
}
Run Code Online (Sandbox Code Playgroud)
但是,IE6不喜欢顶部和底部声明.但是Web开发人员不喜欢IE6.
现在使用 css3 你可以尝试使用 calc()
.main{
height: calc(100% - 111px);
}
Run Code Online (Sandbox Code Playgroud)
看看这个答案: Div 宽度 100% 减去固定数量的像素
小智 5
div{
height:100vh;
background-color:gray;
}Run Code Online (Sandbox Code Playgroud)
<div></div>Run Code Online (Sandbox Code Playgroud)
小智 5
div{
height:100vh;
}Run Code Online (Sandbox Code Playgroud)
<div></div>Run Code Online (Sandbox Code Playgroud)
| 归档时间: |
|
| 查看次数: |
101076 次 |
| 最近记录: |