代码之家 › 专栏 › 技术社区 › woody993

绝对高度100%

absolute height html css

woody993 · 技术社区 · 16 年前

在过去的几个小时里,我一直在研究这个问题,搜索web和stackoverflow并没有得到太多的支持。我该怎么做 #gradient 和 #holes 填写整个页面?

我在Safari中使用了inspect元素功能,当我突出显示body元素时,它不会填充整个窗口。
alt text http://img534.imageshack.us/img534/9955/screenshot20100201at215.png

HTML:

<body>

    <div id="gradient"></div>
    <div id="holes"></div>

    <div id="header">Header Text</div>
</body>

CSS:

html, body {
    height:100%;

    margin:0;
    padding:0;
}

body {
    background-image:url(../Images/Tile.png);
    background-color:#7D7D7D;
    background-repeat:repeat;
}

#gradient {
    background-image:url(../Images/Background.png);
    background-repeat:repeat-x;

    position:absolute;
    top:0px;
    left:0px;
    height:100%;
    right:0px;
}

#holes {
    background-image:url(../Images/Holes.png);
    background-repeat:repeat;

    position:absolute;
    top:2px;
    left:2px;
    height:100%;
    right:0px;
}

#header {
    background-image:url(../Images/Header.png);
    background-repeat:repeat-x;

    position:absolute;
    top:0px;
    left:0px;
    width:100%;

    padding-top:24px;
    height:49px; /* 73 - padding */

    color:rgb(113, 120, 128);
    font-family:Helvetica, Arial;
    font-weight:bold;
    font-size:24px;
    text-align:center;
    text-shadow:#FFF 0px 1px 0px;
}

11 回复 | 直到 9 年前

prodigitalson 16 年前

在我看来,你所有内容的元素都是浮动的。如果是这样,除非清除,否则它不会扩展主体。

Adam 13 年前

请注意高度中指定的属性 百分比 是 calculated with the respect to the containing block …不必是直系祖先 "The containing block for a positioned box is established by the nearest positioned ancestor or, if none exists, the initial containing block " . 我敢打赌这就是提问者的情况,因为没有定位的祖先 position: 设置为 relative 或 absolute )。

因此“包含块”解析为 initial containing block 与视区(窗口)的尺寸相对应。设置 position:relative 到 body 将采取 身体 将高度考虑在内,并沿 身体 完全。

More on containing block here.

Doug Hamlin 13 年前

我也有同样的问题。通过改变位置来固定:绝对到位置:固定。

Gabriele Petrioli 16 年前

[更新]
新途径
这应该可以做到……

使用 display:table 在你的两个元素上应该这样做( 它在我的测试中有效 )(但是你现在必须指定宽度值..

但是,我不确定是否应该将嵌套元素定义为表单元格等。这将变得难以管理。

不过试试看……

旧的非工作版本
你试过了吗


   #gradient

和


   #holes

下面是什么?

#gradient {
  height:auto!important;
  height:100%;
  min-height:100%;
  ..
  ..
}
#holes{
  height:auto!important;
  height:100%;
  min-height:100%;
  ..
  ..
}

sra Jon 14 年前

$('div.class').css({'height':(($(document).height()))+'px'});

sabansaulic 16 年前

最好的方法是使用JavaScript。每个浏览器不支持最小高度。

使用原型的javascript:

<script type="text/javascript">
var height = $(document.body).getHeight();
document.write('<div id="yourdiv" style="height:'+height+'px;width:100%;"></div>');
</script>

Pete B 16 年前

你试过这样设置吗?

#holes {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

将拉伸元素以填充整个页面区域

Francisco Aquino 16 年前

我认为你做得对。这在Chrome中有效(WebKit也是如此!)在IE7/8/怪癖中,只要你把宽度:100%放在坡度和洞上,现在就不能在Mac上测试Safari(只有家里有),但理论上你应该能正确地看到它。

也就是说,也许这是一个doctype的东西,尝试不同的东西?

woody993 16 年前

说实话,我想我只是想 overflow:auto 在我的内容上,以便不需要滚动整个页面

Amresh Raut 11 年前

将CSS样式应用于两个“渐变”孔,并将脚本放在分区之后。

.background-overlay{
    position: absolute;
    left: 0;
    right: 0;
    z-index: -1;
}

<body>
    <div id="gradient"></div>
    <div id="holes"></div>

    <script type="text/javascript">
        $(document).ready(function() {
            var bodyHeight = $("body").height();
            $('#gradient,#holes').height(bodyHeight);

        })
    </script>


    <div id="header">Header Text</div>

-1

xtofl Adam Rosenfield 16 年前

如果我记得正确,为了能够指定容器(a)子容器(b1,b2,…)的位置,它的位置应该是绝对的。你的 body 集装箱的位置不是。

我想你应该加上 position:absolute; 属性到 html,body 选择器。