如何扩展div azure square以填充方形,棕色?

时间:2012-07-04 09:29:09

标签: html css

1 - 如何扩展天蓝色方形<div id="Blue">以填充方形,棕色?

2 - 如何将#frame尺寸高度与我的分辨率窗口相匹配,因为时间会更长,然后滑动窗口向下滚动以查看底部,有时则更小?

获取任何帮助

您可以在此处查看Demo jsFiddle

相关守则。

HTML

<div id="frame">
    <div id="inside_window">
        <div id="Yellow"></div>
        <div id="Green"></div>
    <div id="Blue"><img src="http://www.centerwow.com/stackoverflow/shark.png"  height="50" width="50" />
    <img src="http://www.centerwow.com/stackoverflow/ship.png"  height="100" width="120" /></div>
    <div id="Red"></div>
    <div id="ver"></div>
    <div id="hor"></div>
    <div id="ver2"></div>
</div>

风格

#Blue{
    position: absolute;
    min-height:100%;
    min-width:75%;
    -webkit-border-radius: 0px;    
    margin: 0 150px;    
    background-color: #62A9FF;
    z-index:10;
    display:table;
    font-size:220%;
    cursor: url(http://www.centerwow.com/stackoverflow/magnet.png), auto;
    left:0px;
    top:0px;
}

1 个答案:

答案 0 :(得分:1)

所以这就是你第一个问题的答案:http://jsfiddle.net/surendraVsingh/hfuGx/49/

将最小高度更改为高度:100%;

#Blue
{
    position: absolute;
    height:100%;
    min-width:75%;
    -webkit-border-radius: 0px;    
    margin: 0 150px;
    background-color: #62A9FF;
    z-index:10;
    display:table;
    font-size:220%;
    cursor: url(http://www.centerwow.com/stackoverflow/magnet.png), auto;
    left:0px;
    top:0px; 
}

关于第二个问题: 在css代码的顶部添加以下给定的css:

html, body{height:100%;} 

注意:如果浏览器窗口高度太小,它将显示滚动条,因为它将高度作为绿色和&amp;的总和。红色div。