GVKun编程网logo

css – 高度：IE7中的100％（css设置高度100%）

6

对于想了解css–高度：IE7中的100％的读者，本文将提供新的信息，我们将详细介绍css设置高度100%，并且为您提供关于css–100％DIV宽度不是真的100％、css–Bootstrap3–在

对于想了解css – 高度：IE7中的100％的读者，本文将提供新的信息，我们将详细介绍css设置高度100%，并且为您提供关于css – 100％DIV宽度不是真的100％、css – Bootstrap 3 – 在列中自定义div的100％高度、css – DIV – 强制高度100％= / =页面高度？、css – IE显示：table-cell child忽略高度：100％的有价值信息。

本文目录一览：

css – 高度：IE7中的100％（css设置高度100%）

css – 高度：IE7中的100％（css设置高度100%）

UPDATE

html和body的边距必须为0才能完全填充页面.

结束更新
* UPDATE *

我已经修复了使用以下建议将高度属性添加到html和body标签.现在需要轻微向下滚动才能查看整个页面.关于为什么会这样的想法？

结束更新

我正在使用CSS根据需要在屏幕上填充div.我的宽度和高度设置为100％,但div没有填满屏幕的高度.这是IE7的已知问题还是我可能只是遗漏了什么？代码如下.

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
    <link rel="Stylesheet" href="test.css" />
</head>
<body>
<div id="divy"></div>
</body>
</html>

CSS

#divy
{
    width:100%;
    height:100%;
    background-color:Blue;
}

解决方法

问题是容器必须具有100％的高度,因为它的子元素假设为100％…

在这种情况下,容器是< html> – > <身体GT;所以快速修复就可以了

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

css – 100％DIV宽度不是真的100％

css – 100％DIV宽度不是真的100％

当我有< div>宽度：100％，真不是100％： 
<div id="div">testtesttesttesttest</div>

...

#div {
  width: 100%;
  background-color: red;
}

现在当你调整窗口大小的时候，所以有一个水平的滚动条，你滚动到右边，然后背景消失了。在这种情况下，我该如何保持背景？

在这里，您可以看到操作中的问题：
http://beta.ovoweb.net/?i=3

现在当您调整窗口大小并向右滚动时，您将看不到背景。如何解决这个问题？

解决方法

100％的值是父宽度或视图端口的100％。见 documentation。

css – Bootstrap 3 – 在列中自定义div的100％高度

css – Bootstrap 3 – 在列中自定义div的100％高度

假设我在一行中有两列。

一个包含一个使用class =“img-responsive”的流体图像图像，另一个列有一个自定义div块。

我的问题是如何获得这个自定义div的高度100％。下面没有为我工作。

height: auto;
max-width: 100%;

如果我在高度上设置固定值，它不会很好地与
包含图像的列作为图像在视口大小更改时调整高度。

我可以通过做一些像以前的问题建议的事情，得到列高度相等。

class*="col-"]{
    margin-bottom: -99999px;
    padding-bottom: 99999px;
}
.row {
    overflow: hidden; 
}

但我的情况略有不同，我需要使用自定义div里面的列
设置与图像高度相等的高度，而不是父divs(列)。

这里是JS Fiddle

解决方法

2种方式：

显示表：
你可以把行转成显示：table和col-into：display-table-cell。它的工作buuuut的表的限制，有那些限制是推拉和偏移将不工作。另外，我不知道你在哪里使用这个 – 在什么断点。你应该使图像全宽，并将其包装在另一个容器中，以填充在那里。此外，你需要弄清楚移动设计，这是为768像素及以上。当我使用这个，我重新声明大小，有时我坚持importants在他们，因为表承担其内容的宽度，因此具有再次宣布的宽度有助于这一点。你需要玩耍。我也使用一个脚本，但你必须更改较少的文件使用它，否则它不会响应地工作。

演示：http://jsbin.com/EtUBujI/2

.row.table-row > [class*="col-"].custom {
    background-color: lightgrey;
    text-align: center;
  }


@media (min-width: 768px) {

  img.img-fluid {width:100%;}

  .row.table-row {display:table;width:100%;margin:0 auto;}

  .row.table-row > [class*="col-"] {
    float:none;
    float:none;
    display:table-cell;
    vertical-align:top;
  }

  .row.table-row > .col-sm-11 {
    width: 91.66666666666666%;
  }
  .row.table-row > .col-sm-10 {
    width: 83.33333333333334%;
  }
  .row.table-row > .col-sm-9 {
    width: 75%;
  }
  .row.table-row > .col-sm-8 {
    width: 66.66666666666666%;
  }
  .row.table-row > .col-sm-7 {
    width: 58.333333333333336%;
  }
  .row.table-row > .col-sm-6 {
    width: 50%;
  }
  .col-sm-5 {
    width: 41.66666666666667%;
  }
  .col-sm-4 {
    width: 33.33333333333333%;
  }
  .row.table-row > .col-sm-3 {
    width: 25%;
  }
  .row.table-row > .col-sm-2 {
    width: 16.666666666666664%;
  }
  .row.table-row > .col-sm-1 {
    width: 8.333333333333332%;
  }


}

HTML

<div>
    <div>
        <div>
                100% height to make equal to ->
        </div>
        <div>
            <img src="http://placehold.it/600x400/B7AF90/FFFFFF&text=image+1">
        </div>
    </div>
</div>

绝对bg div

演示：http://jsbin.com/aVEsUmig/2/edit

内容高于及低于以下内容的演示：http://jsbin.com/aVEsUmig/3

.content {
        text-align: center;
        padding: 10px;
        background: #ccc;

}


@media (min-width:768px) { 
    .my-row {
        position: relative;
        height: 100%;
        border: 1px solid red;
        overflow: hidden;
    }
    .img-fluid {
        width: 100%
    }
    .row.my-row > [class*="col-"] {
        position: relative
    }
    .background {
        position: absolute;
        padding-top: 200%;
        left: 0;
        top: 0;
        width: 100%;
        background: #ccc;
    }
    .content {
        position: relative;
        z-index: 1;
        width: 100%;
        text-align: center;
        padding: 10px;
    }

}

HTML

<div>

    <div>

        <div>

        <div>
          This is inside a relative positioned z-index: 1 div
          </div>

         <div><!--empty bg-div--></div>
        </div>

        <div>
            <img src="http://placehold.it/200x400/777777/FFFFFF&text=image+1">
        </div>

    </div>

</div>

css – DIV – 强制高度100％= / =页面高度？

css – DIV – 强制高度100％= / =页面高度？

我正在尝试设置一个设计,这是一个很大的问题.这是一个参考网站;

http://throwbackhero.com/index1.php

问题是我将身体设置为高度：100％;在样式表和#wrapper div中也是如此.高度偏离当前页面高度,并没有考虑到其他div可能导致溢出.

我想,即使浏览器的垂直大小发生变化,空白页面也是浏览器的大小,内容/包装器div将缩小以适应.

可以这样做吗？

编辑

好的,我原来的问题非常混乱.这是一张照片;

所以,在图1(左)是问题.高度100％;在包装器和内容div上,它正在创造那个坏孩子.我希望它看起来像图片,白色/灰色区域根据浏览器的大小增长/缩小…

解决方法

最简单的方法就是使用CSS： 

height: 100vh;

其中’vh’代表浏览器窗口的垂直高度.响应调整浏览器和移动设备的大小.

css – IE显示：table-cell child忽略高度：100％

css – IE显示：table-cell child忽略高度：100％

我需要动态构建一个表来容纳一些数据。
我按照通常的方式使用div：display，table，display：table-row和display：table-cell： 
.tab {
    display: table;
    height:100%;
    width: 200px;
}

.row {
    height: 100%;
    display: table-row;
}

.elem {
    border: 1px solid black;
    vertical-align: top;
    display: table-cell;
    height:100%;
    background: blue;
}

.content {
    height: 100%;
    background: greenyellow;
}
<div>
    <div>
        <div>
            <div>
                Content
            </div>
        </div>
        <div>
            <div>
                Longer content that will need to wrap around eventually you kNow and don't you hate it when things don't end as you expect them octopus
            </div>
        </div>
    </div>
</div>

Or view on Jsfiddle.

在大多数浏览器中，我得到了预期的输出：

但是，在IE8(甚至更新的版本，我还没有测试更新的版本)，我得到以下内容：

高度：100％设置在围绕“内容”的div被忽略。

根据CanIUse，IE8应提供相关显示属性的全面支持。

我已经看了很多类似的问题，没有找到一个可行的解决方案：大多数解决方案都依赖Javascript(我正在寻找避免)，使用固定的高度(上一页)或不工作在IE8上。

解决方法

不幸的是，显示百分比值对于height的影响：table-row和display：table-cell元素根据 spec未定义：

CSS 2.1 does not define how the height of table cells and table rows is calculated when their height is specified using percentage values.

因此，虽然浏览器可能声称对表格布局提供完全支持，但是由于没有正确的行为，某些方面(例如百分比高度)可能无法始终贯穿所有浏览器。您可以尝试在Microsoft Connect上提出问题，希望他们将行为改变为可互操作的，但同时您将需要找到不同的解决方法(即使这样，您也不能保证行为将保持互操作性，即使在其它浏览器)。

更糟糕的是，我刚刚测试过，这会影响所有版本的IE，包括11，这意味着一个IE特定的黑客将在这里缩短。如果您需要使用CSS表格布局，那么您需要支持IE8的事实证明，那么纯粹的CSS解决方案可能是不可行的。

关于css – 高度：IE7中的100％和css设置高度100%的介绍已经告一段落，感谢您的耐心阅读，如果想了解更多关于css – 100％DIV宽度不是真的100％、css – Bootstrap 3 – 在列中自定义div的100％高度、css – DIV – 强制高度100％= / =页面高度？、css – IE显示：table-cell child忽略高度：100％的相关信息，请在本站寻找。

本文标签：

上一篇css阴影四周但顶部（css 阴影 四周阴影）

下一篇白帽seo优化特点(黑帽SEO优化)（白帽seo黑帽什么区别?）

相关文章