我想设计一个网站,页面的四角是圆角的(窗口所有角落都是黑色圆圈)。
为此我将身体颜色设置为黑色,并且我已经为内容div添加了一个粗糙的角落,一部分形成了它的背景。
<body style="backgound: black">
<div class="content" style="background: blue; border-radius: 8px;">
....
</div>
</body>
之后我尝试过:
无效解决方案1
position: absolute;
height: 100%;
当内容高度大于窗口时不起作用,因为滚动时内容背景会隐藏。
无效解决方案2
position: fixed;
height: 100%;
内容高度大于窗口时不工作;没有显示滚动条。
无效解决方案3
什么都没有。
当内容高度小于窗口时不工作;底部是黑色的。
丑陋的工作解决方案1
添加带边框的4张图像,位置固定
任何人都知道这个问题的清洁解决方案吗? css3被接受。
感谢
答案 0 :(得分:1)
我认为这应该有所帮助:
.content
{
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background blue;
border-radius: 8px;
}
编辑此解决方案可行:
.content
{
float:left;
min-height: 100%;
height: auto;
width: 100%;
background: blue;
border-radius: 8px;
}
另一个使用css3 calc()
here
答案 1 :(得分:0)
答案 2 :(得分:0)
为标题使用两个嵌套的固定div,对于页脚使用相同的。
这适用于每种浏览器上的各种内容:
运行示例:http://jsfiddle.net/5kgN3/
HTML
<div id="headerOuter"><div id="headerInner"></div></div>
<div class="content">
<br />test
<br />test
<!-- More tests here -->
<br />test
<br />test
</div>
<div id="footerOuter"><div id="footerInner"></div></div>
CSS
body, html {
height: 100%;
width: 100%;
}
.content {
min-height: 100%;
height: auto;
width: 100%;
background: blue;
padding-top: 20px;
padding-bottom: 20px;
}
#headerOuter{
background-color: black;
height: 20px;
width: 100%;
position: fixed;
top: 0;
}
#headerInner{
border-radius: 20px 20px 0px 0px;
background-color: blue;
height: 20px;
width: 100%;
position: fixed;
top: 0;
}
#footerOuter{
background-color: black;
height: 20px;
width: 100%;
position: fixed;
bottom: 0;
}
#footerInner{
border-radius: 0px 0px 20px 20px;
background-color: blue;
width: 100%;
height: 20px;
position: fixed;
bottom: 0;
}
我使用了20px的border-radius,当调整到你的8px时,记得调整填充和高度。