我面临的问题与覆盖100％高度格。我可以使用固定的位置来解决封面问题，但那不是我想要的，因为您应该能够向下滚动“封面”>以便分辨率低于我的人可以看到整个内容。设置高度100％绝对格

代码示例：

HTML

<body> 
<div>Overlay example text</div> 
</body>

CSS

body { 
    float: left; 
    height: 3000px; 
    width: 100%; 
} 
body div { 
    position: absolute; 
    height: 100%; 
    width: 100%; 
    background-color: yellow; 
}

问题： div的高度100％只包含web浏览器/视口的100％，但我想它覆盖整个身体。

感谢提前:)

来源

2013-01-08 Nworks

使用JQUery调整你的DIV的绝对位置 – Maysam

这个是CSS的第一个问题..'min高度'并不真正承诺什么名字暗示：/ – vsync

http://jsbin.com/ubalax/1/edit 100％的高度。你可以在这里看到的结果

body { 
    position: relative; 
    float: left; 
    height: 3000px; 
    width: 100%; 
} 
body div { 
    position: absolute; 
    height: 100%; 
    width: 100%; 
    top:0; 
    left:0; 
    background-color: yellow; 
}

来源

2013-01-08 15:04:16 ashley

好吧，所以每个人都在通往正确答案的路上，但是浮动：左边和位置：相对于身体解决了它。谢谢！ – Nworks

我有零的想法为什么这个工程，但它确实......这是这些悲伤时刻之一，当你发现一个现实，phisics停止工作。 – vsync

非常感谢您的时间和努力 –

尝试添加

position:relative

你的身体的风格。无论什么时候绝对定位任何东西，您都需要相对定位其中一个父容器，因为这会使该项目相对于相对的父容器绝对定位。

当你有没有相对的元素，的CSS不会知道DIV是什么绝对的位置，因此将不知道该怎么走的

来源

2013-01-08 15:01:48 Pete

感谢有用的信息，虽然我不得不把一个浮动：留在它上面也工作:) – Nworks

向左浮动是在你的原始代码，并没有区别：http://jsfiddle.net/rvKPq/3/ – Pete

对于任何人阅读：我认为这应该是正确的答案（并有更高的upvote），因为它是第一次正确提供解决方案，并向解决方案添加解释，而不仅仅是代码粘贴。 –

几个答案已经给出了一个高度和宽度100％的解决方案，但我建议你不要在CSS中使用百分比，使用顶部/底部和左/右定位。

这是一个更好的方法，可以让您控制保证金。

下面是代码：

body { 
    position: relative; 
    height: 3000px; 
} 
body div { 

    top:0px; 
    bottom: 0px; 
    right: 0px; 
    left:0px; 
    background-color: yellow; 
    position: absolute; 
}

来源

2013-01-08 15:08:04

这是为我工作的解决方案。我从来不知道你可以按位置拉伸图像。 –

完全拉伸（水平/垂直）

接受的答案是伟大的。只是想指出一些来这里的人。在这些情况下，边距不是必需的。如果奥尤想用一个特定的“保证金”一个中心的布局，你可以将它们添加到右侧和左侧，像这样：

.stretched { 
    position: absolute; 
    right: 50px; top: 0; bottom: 0; left: 50px; 
    margin: auto; 
}

这是非常有用的。

定心DIV（垂直/水平）

作为奖励，绝对定心其可用于获得极其简单定心：

.centered { 
    height: 100px; width: 100px; 
    right: 0; top: 0; bottom: 0; left: 0; 
    margin: auto; 
    position: absolute; 
}

来源

2014-01-30 20:39:04

，而无需使用任何高度，但仍然另一种解决方案填充100％可用高度。检查这个例如在codepen上。 http://codepen.io/gauravshankar/pen/PqoLLZ

对于这个HTML和身体应该有100％的身高。此高度等于视口高度。

使内部div的位置为绝对值，并给出顶部和底部0.这填补了div到可用高度。（高度为身体。）

的html代码：

<head></head> 

<body> 
    <div></div> 
</body> 

</html>

CSS代码：

* { 
    margin: 0; 
    padding: 0; 
} 

html, 
body { 
    height: 100%; 
    position: relative; 
} 

html { 
    background-color: red; 
} 

body { 
    background-color: green; 
} 

body> div { 
    position: absolute; 
    background-color: teal; 
    width: 300px; 
    top: 0; 
    bottom: 0; 
}

来源

2015-04-24 09:49:48 Gaurav

而不是使用body，使用html工作对我来说：

html { 
    min-height:100%; 
    position: relative; 
} 

div { 
    position: absolute; 

    top: 0px; 
    bottom: 0px; 
    right: 0px; 
    left: 0px; 
}

来源

2016-09-26 11:29:08 Misja

设置高度100％绝对格

回答

完全拉伸（水平/垂直）

定心DIV（垂直/水平）

相关问题