html高度100 - 自适应浏览器高度




如何使浏览器窗口的高度达到100%? (18)

我有一个有两列的布局 - 左边的div和右边的div

正确的div有一个灰色的background-color ,我需要它根据用户的浏览器窗口的高度垂直扩展。 现在, background-color在该div的最后一部分内容结束。

我试过height:100%min-height:100%; 等等


100vw ===视口宽度的100%。

100vh ===视口高度的100%。

如果你想设置浏览器窗口大小的div宽度或高度的100%,你应该使用

宽度: 100vw

对于身高: 100vh

或者如果你想设置它更小的尺寸使用CSS calc function 。 例:

#example { width: calc(100vw - 32px) }


使用FlexBox CSS

Flexbox非常适合这类问题。 虽然大多数人都知道在水平方向上布置内容,但Flexbox实际上也适用于垂直布局问题。 您只需将垂直部分包裹在柔性容器中,然后选择要展开的部分。 他们会自动占用其容器中的所有可用空间。


你不会提到一些重要的细节,如:

  • 布局是否固定宽度?
  • 是一个或两个列固定宽度?

这是一种可能性:

body,
div {
  margin: 0;
  border: 0 none;
  padding: 0;
}

html,
body,
#wrapper,
#left,
#right {
  height: 100%;
  min-height: 100%;
}

#wrapper {
  margin: 0 auto;
  overflow: hidden;
  width: 960px; // width optional
}

#left {
  background: yellow;
  float: left;
  width: 360px; // width optional but recommended 
}

#right {
  background: grey;
  margin-left: 360px; // must agree with previous width 
}
<html>
<head>
  <title>Example</title>
</head>

<body>
  <div id="wrapper">
    <div id="left">
      Left
    </div>

    <div id="right"></div>
  </div>
</body>

</html>

这取决于哪些色谱柱需要固定,哪些色谱柱是液体。 你也可以用绝对定位来做到这一点,但我通常使用浮点数来取得更好的结果(特别是在跨浏览器方面)。


你需要做两件事,一件是将你已经做过的高度设置为100%。 其次是将立场设置为绝对。 这应该够了吧。

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

  position: absolute;

Source


其中一个选项是使用CSS表格。 它有很好的浏览器支持,甚至可以在IE8中使用。

JSFiddle示例

html, body {
  height: 100%;
  margin: 0;
}
.container {
  display: table;
  width: 100%;
  height: 100%;
}
.left, .right {
  display: table-cell;
  width: 50%;
}
.right {
  background: grey;
}
<div class="container">
  <div class="left"></div>
  <div class="right"></div>
</div>


只需使用“vh”单位而不是“px”,这意味着视口高度。

height:100vh;

块元素在默认情况下会占用父级的全部宽度。

这是他们如何满足他们的设计要求,即垂直堆叠。

9.4.1阻止格式化上下文

在块格式化上下文中,框从一个包含块的顶部开始一个接一个地垂直排列。

但是,这种行为不会扩展到高度。

默认情况下,大多数元素都是其内容的高度( height: auto )。

与宽度不同,如果需要额外空间,则需要指定高度。

因此,请牢记这两点:

  • 除非你想要全宽,否则你需要定义一个块元素的宽度
  • 除非你想要内容高度,否则你需要定义一个元素的高度

.Contact {
  display: flex;     /* full width by default */
  min-height: 100vh; /* use full height of viewport, at a minimum */
}

.left {
  flex: 0 0 60%;
  background-color: tomato;
}

.right {
  flex: 1;
  background-color: pink;
}

body { margin: 0; } /* remove default margins */
<div class="Contact">
  <section class="left">
    <div class="">
      <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</h1>
    </div>
  </section>
  <section class="right">
    <img />
  </section>
</div>


如果你使用position: absolute; 和jQuery,你可以使用

$("#mydiv").css("height", $(document).height() + "px");

如果要设置<div>或任何元素的高度,则应该将<body><html>的高度设置为100%。 然后你可以用100%来设置元素的高度:)

这里是一个例子:

body, html {
  height: 100%;
}

#right {
  height: 100%;
}

尝试下面的CSS:

html {
    min-height: 100%;
    margin: 0;
    padding: 0;
}

body {
    height: 100%;
}

#right {
    min-height: 100%;
}

尽管这个解决方案是用jQuery I来完成的,但是对于任何需要使用列来适应屏幕大小的人来说,这个解决方案可能都很有用。

对于从页面顶部开始的列,此解决方案是最简单的。

body,html{
  height:100%;
}

div#right{
  height:100%
}

对于不在页面顶部开始的列(例如:如果它们是从页眉开始的)。

<script>
     $(document).ready(function () {
        var column_height = $("body").height();
        column_height = column_height - 100; // 100 is the header height
        column_height = column_height + "px";
        $("#column").css("height",column_height);
    });
</script>

第一种方法将身体高度应用于它和列,这意味着这是height100% + height100%

第二种方法通过获取主体的高度来获得向用户显示的页面高度,然后减去标题大小以知道显示列的剩余高度。


您可以使用display: flexheight: 100vh

html, body {
  height: 100%;
  margin: 0px;
}
body {
  display: flex;
}

.left, .right {
  flex: 1;
}

.left {
  background: orange;
}

.right {
  background: cyan;
}
<div class="left">left</div>
<div class="right">right</div>


最简单的:

html,
body {
  height: 100%;
  min-height: 100%;
}
body {
  position: relative;
  background: purple;
  margin: 0;
  padding: 0;
}
.fullheight {
  display: block;
  position: relative;
  background: red;
  height: 100%;
  width: 300px;
}
<html class="">

<body>
  <div class="fullheight">
    This is full height.
  </div>
</body>

</html>


有几个CSS3测量单位称为:

视口 - 百分比(或视口相对)长度

什么是视口 - 百分比长度?

从上面链接的W3候选人建议:

视口百分比长度是相对于初始包含块的大小。 当初始包含块的高度或宽度发生变化时,会相应地缩放。

这些单位是vh (视口高度), vw (视口宽度), vmin (视口最小长度)和vmax (视口最大长度)。

这怎么可以用来使分隔符填满浏览器的高度呢?

对于这个问题,我们可以使用vh1vh等于视口高度的1%。 也就是说,无论元素在DOM树中的位置如何, 100vh都等于浏览器窗口的高度:

HTML

<div></div>

CSS

div {
    height:100vh;
}

这实际上是所有需要的。 这是一个JSFiddle的例子

哪些浏览器支持这些新单位?

除了Opera Mini以外,所有最新的主流浏览器都支持该功能。 退房我可以使用......获得进一步支持。

这怎么可以用于多列?

在手边的问题中,以左右分隔符为特色,这里是一个JSFiddle示例,显示了包含vhvw的两列布局。

100vh100%有何不同?

以此布局为例:

<body style="height:100%">
    <div style="height:200px">
        <p style="height:100%; display:block;">Hello, world!</p>
    </div>
</body>

这里的p标签设置为100%高度,但由于其包含div高度为200px,200px的100%变为200px, 而不是身高的100%。 相反,使用100vh意味着无论div高度如何, p标签都是body高度的100%。 看看这个随附的JSFiddle ,轻松看到差异!


添加min-height: 100%并且不指定高度(或将其放在自动上)。 它完全为我做了这份工作:

.container{     
    margin: auto;
    background-color: #909090;
    width: 60%;
    padding: none;
    min-height: 100%;
}

试试这个 - 测试:

body {
  min-height: 100%;
}

#right, #left {
  height: 100%;
}

这对我来说很有用:

<div style="position:fixed; top:0px; left:0px; bottom:0px; right:0px;"> </div>

使用position:fixed而不是position:absolute ,即使向下滚动,分区也会扩展到屏幕的末端。


这是对高度的修正。

在你的CSS中使用:

#your-object: height: 100vh;

对于不支持vh-units浏览器,请使用modernizr。

添加此脚本(为vh-units添加检测)

// https://github.com/Modernizr/Modernizr/issues/572
// Similar to http://jsfiddle.net/FWeinb/etnYC/
Modernizr.addTest('cssvhunit', function() {
    var bool;
    Modernizr.testStyles("#modernizr { height: 50vh; }", function(elem, rule) {   
        var height = parseInt(window.innerHeight/2,10),
            compStyle = parseInt((window.getComputedStyle ?
                      getComputedStyle(elem, null) :
                      elem.currentStyle)["height"],10);

        bool= !!(compStyle == height);
    });
    return bool;
});

最后,如果浏览器不支持vh-units ,则使用此函数将视口的高度添加到#your-object

$(function() {
    if (!Modernizr.cssvhunit) {
        var windowH = $(window).height();
        $('#your-object').css({'height':($(window).height())+'px'});
    }
});




height