使身体具有100％的浏览器高度-Java 学习之路

661

我想让身体拥有100％的浏览器高度 . 我可以使用CSS吗？

我尝试设置 height: 100% ，但它不起作用 .

我想为页面设置背景颜色以填充整个浏览器窗口，但如果页面内容很少，我会在底部看到一个丑陋的白条 .

21 回答

快速更新

html, body{
    min-height:100%;
    overflow:auto;
}

使用今天的CSS更好的解决方案

html, body{ 
  min-height: 100vh;
  overflow: auto;
}

回复于 2024-05-12T22:17:22+08:00

这里：

html,body{
    height:100%;
}

body{
  margin:0;
  padding:0
  background:blue;
}

回复于 2024-05-12T22:17:22+08:00

19
尝试将html元素的高度设置为100％ .
```
html, 
body {
    height: 100%;
}
```
Body查看其父级（HTML）以了解如何扩展动态属性，因此HTML元素也需要设置它的高度 .

然而，身体的内容可能需要动态改变 . 将min-height设置为100％将实现此目标 .
```
html {
  height: 100%;
}
body {
  min-height: 100%;
}
```
回复于 2024-05-12T22:17:22+08:00

@media all {
* {
    margin: 0;
    padding: 0;
}

html, body {
    width: 100%;
    height: 100%;
} }

回复于 2024-05-12T22:17:22+08:00

12
在测试了各种场景之后，我相信这是最好的解决方案：
```
html {
    width:100%;
    height: 100%;
    display: table;
}

body {
    width:100%;
    display:table-cell;
}

html, body {
    margin: 0px;
    padding: 0px;
}
```
它是动态的，因为如果内容溢出，html和body元素将自动扩展 . 我在最新版本的Firefox，Chrome和IE 11中对此进行了测试 .

在这里看到完整的小提琴（为了你的 table ，你可以随时更改它以使用div）：

https://jsfiddle.net/71yp4rh1/9/

话虽如此，有 several issues with the answers posted here .
```
html, body {
    height: 100%;
}
```
使用上面的CSS会导致html和body元素在其内容溢出时不会自动展开，如下所示：

https://jsfiddle.net/9vyy620m/4/

滚动时，请注意重复背景？发生这种情况是因为由于子表溢出，body元素的高度没有增加 . 为什么它不像任何其他块元素那样扩展？我不确定 . 我认为浏览器处理不当 .
```
html {
    height: 100%;
}

body {
    min-height: 100%;
}
```
如上所示在身体上设置100％的最小高度会导致其他问题 . 如果执行此操作，则无法指定子div或表占用百分比高度，如下所示：

https://jsfiddle.net/aq74v2v7/4/

希望这有助于某人 . 我认为浏览器处理错误 . 我希望身体的高度可以自动调整，如果它的孩子溢出增长 . 但是，当您使用100％高度和100％宽度时，似乎不会发生这种情况 .
回复于 2024-05-12T22:17:22+08:00
859
只有1行CSS ...你可以完成这个 .
```
body{ height: 100vh; }
```
回复于 2024-05-12T22:17:22+08:00

159

html {
    background: url(images/bg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    min-height: 100%;
}
html body {
    min-height: 100%
}

适用于所有主流浏览器：FF，Chrome，Opera，IE9 . 适用于背景图像和渐变 . 滚动条可作为内容需求提供 .

回复于 2024-05-12T22:17:22+08:00

-1
如果你有背景图像，那么你需要设置它：
```
html{
  height: 100%;
}
body {
  min-height: 100%;
}
```
这可以确保当内容高于视口时允许您的body标签继续增长，并且当您开始向下滚动时，背景图像会继续重复/滚动/滚动 .

记住，如果你必须支持IE6，你将需要找到一种方法来楔入 height:100% 身体，IE6无论如何都会像_201033那样对待 height .
回复于 2024-05-12T22:17:22+08:00
64
在我使用的每个CSS文件的开头使用的是以下内容：
```
html, body{
    margin: 0;

    padding: 0;

    min-width: 100%;
    width: 100%;
    max-width: 100%;

    min-height: 100%;
    height: 100%;
    max-height: 100%;
}
```
边距为0可确保浏览器不会自动定位HTML和BODY元素，使其左侧或右侧有一些空间 .

填充0确保HTML和BODY元素不会因浏览器默认值而自动向下或向右推送其中的所有内容 .

宽度和高度变量设置为100％，以确保浏览器不会调整大小，以期实际上有一个自动设置的边距或填充，最小和最大设置，以防万一，一些奇怪的，无法解释的东西发生，虽然你可能不需要它们 .

这个解决方案也意味着，就像几年前我第一次开始使用HTML和CSS时所做的那样，你不必让你的第一个 <div> margin:-8px; 使它适合浏览器窗口的角落 .

在我发布之前，我查看了我的另一个全屏CSS项目，发现我在那里使用的只是 body{margin:0;} 而且没有别的，在我工作的两年里工作得很好 .

希望这个详细的答案有所帮助，我感到你的痛苦 . 在我看来，浏览器应该在左侧，有时在body / html元素的顶部设置一个不可见的边界是愚蠢的 .
回复于 2024-05-12T22:17:22+08:00
1
如果要保留正文的边距而不想滚动条，请使用以下css：
```
html { height:100%; }
body { position:absolute; top:0; bottom:0; right:0; left:0; }
```
设置 body {min-height:100%} 将为您提供滚动条 .

请参阅http://jsbin.com/aCaDahEK/2/edit?html,output上的演示 .
回复于 2024-05-12T22:17:22+08:00

-2

html, body
{
  height: 100%;
  margin: 0;
  padding: 0;
}

回复于 2024-05-12T22:17:22+08:00

-1

如果需要，您也可以使用JS

var winHeight = window.innerHeight    || 
document.documentElement.clientHeight || 
document.body.clientHeight;

var pageHeight = $('body').height();
if (pageHeight < winHeight) {
    $('.main-content,').css('min-height',winHeight)
}

回复于 2024-05-12T22:17:22+08:00

3
作为将 html 和 body 元素的高度设置为 100% 的替代方法，您还可以使用视口百分比长度 .

5.1.2 . 视口百分比长度：'vw'，'vh'，'vmin'，'vmax'单位视口百分比长度相对于初始包含块的大小 . 当初始包含块的高度或宽度改变时，它们相应地缩放 .

在这种情况下，您可以使用值 100vh - 这是视口的高度 .

Example Here
```
body {
    height: 100vh;
}
```
```
body {
    min-height: 100vh;
}
```
大多数现代浏览器都支持此功能 - support can be found here .
回复于 2024-05-12T22:17:22+08:00
113

如果你不想编辑你自己的CSS的工作文件和自己定义高度规则，最典型的CSS框架也解决了这个问题，body元素填充整个页面，以及其他问题，轻松使用多种大小的视口 .

例如，Tacit CSS框架解决了这个问题，你不需要定义任何CSS规则和类，只需在HTML中包含CSS文件即可 .

回复于 2024-05-12T22:17:22+08:00
26
请检查一下：
```
* {margin: 0; padding: 0;}    
html, body { width: 100%; height: 100%;}
```
或尝试新方法视口高度：
```
html, body { width: 100vw; height: 100vh;}
```
视口：如果您使用视口意味着任何大小的屏幕内容将在屏幕上达到全高 .
回复于 2024-05-12T22:17:22+08:00

所有答案都是100％正确并得到了很好的解释，但我做了一些很好的事情并且非常简单地使它具有响应性 .

这里的元素将占据100％的视图端口高度，但是当涉及到移动视图时，它在纵向视图（移动）上看起来并不好看，所以当视口变小时，元素将会折叠并相互重叠 . 所以这里的响应很少就是代码 . 希望有人能从中得到帮助 .

<style>
.img_wrap{
      width:100%;
      background: #777;
}
.img_wrap img{
      display: block;  
      width: 100px;
      height: 100px;
      padding: 50px 0px;
      margin: 0 auto;
}
.img_wrap img:nth-child(2){
      padding-top: 0;
}
</style>

<div class="img_wrap">
  <img src="https://i.pinimg.com/originals/71/84/fc/7184fc63db0516a00e7d86900d957925.jpg" alt="">
  <img src="https://i.pinimg.com/originals/71/84/fc/7184fc63db0516a00e7d86900d957925.jpg" alt="">
</div>

<script>
   var windowHeight = $(window).height();
   var elementHeight = $('.img_wrap').height();

   if( elementHeight > windowHeight ){
       $('.img_wrap').css({height:elementHeight});
   }else{
       $('.img_wrap').css({height:windowHeight});
   }
</script>

这是JSfiddle Demo.

回复于 2024-05-12T22:17:22+08:00

4

关于底部的额外空间：您的页面是ASP.NET应用程序吗？如果是这样，你的标记中几乎可能包含所有内容 . 不要忘记为表单设置样式 . 将 overflow:hidden; 添加到表单可能会删除底部的额外空间 .

回复于 2024-05-12T22:17:22+08:00

尝试

<html style="width:100%; height:100%; margin: 0; padding: 0;">
<body style="overflow:hidden; width:100%; height:100%; margin:0; padding:0;">

回复于 2024-05-12T22:17:22+08:00

2
尝试添加：
```
body {
height: 100vh;
}
```
回复于 2024-05-12T22:17:22+08:00
0
CSS3有一个新方法 .
```
height:100vh
```
它使ViewPort 100％等于高度 .

所以你的守则应该是
```
body{
 height:100vh; 
 }
```
回复于 2024-05-12T22:17:22+08:00

Here Update

html
  {
    height:100%;
  }

body{
     min-height: 100%;
     position:absolute;
     margin:0;
     padding:0; 
}

回复于 2024-05-12T22:17:22+08:00

使身体具有100％的浏览器高度

21 回答

相关问题