如何使div的浏览器窗口高度为100%

2009-10-16 html css height

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

右边的div具有灰色的background-color ,我需要根据用户浏览器窗口的高度将其垂直扩展。现在, background-color在该div中的最后一条内容处结束。

我已经尝试过height:100%min-height:100%;

Answers

如果您能够完全定位自己的元素,

position: absolute;
top: 0;
bottom: 0;

会做到的。

您没有提到一些重要的细节,例如:

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

这是一种可能性:

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>

根据需要固定的色谱柱和固定的色谱柱,可以有多种变化。您也可以使用绝对定位来做到这一点,但我通常发现使用浮点数会获得更好的效果(尤其是在跨浏览器方面)。

添加min-height: 100%并且不指定高度(或将其设置为自动)。它完全为我完成了工作:

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

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

这是一个例子:

body, html {
  height: 100%;
}

#right {
  height: 100%;
}

试试看-经过测试:

body {
  min-height: 100%;
}

#right, #left {
  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%

第二种方法是通过获取正文的高度来获取显示给用户的页面的高度,然后减去标题大小以知道还剩下多少高度才能显示该列。

有几个CSS 3度量单位,称为:

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

什么是视口百分比长度?

根据上面链接的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高度为200像素,因此200像素的100%变为200像素, 而不是 body高度的100%。相反,使用100vh意味着p标签将为body 100%高度,而与div高度无关。看看这个随附的JSFiddle,可以轻松看到其中的区别!

这为我工作:

html, body {
    height: 100%; /* IMPORTANT!!! Stretches viewport to 100% */
}

#wrapper {
    min-height: 100%; /* Minimum height for a modern browser */
    height:auto !important; /* Important rule for a modern browser */
    height:100%; /* Minimum height for Internet Explorer */
    overflow: hidden !important; /* Firefox scroll-bar */
}

取自此页面

flex模型解决方案相比,所有其他解决方案(包括带有vh的投票最多的解决方案)都不是最优的。

随着CSS flex模型的出现,解决100%高度问题变得非常非常容易:use height: 100%; display: flex在父元素上height: 100%; display: flex ,在子元素上height: 100%; display: flex flex: 1 。他们会自动占用容器中的所有可用空间。

注意标记和CSS是多么简单。没有桌子黑客或任何东西。

所有主要的浏览器以及IE11 +都支持 flex模型。

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

.left, .right {
  flex: 1;
}

.left {
  background: orange;
}

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

在此处了解有关flex模型的更多信息。

这对我有用:

<div style="position:fixed; top:0px; left:0px; bottom:0px; right:0px; background: red;"> </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'});
    }
});

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

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

最简单的:

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>

使用FlexBox CSS

Flexbox非常适合此类问题。尽管Flexbox以水平方向上的内容布局而闻名,但实际上它对于垂直布局问题也同样有效。您所要做的就是将垂直部分包装在flex容器中,然后选择要扩展的部分。他们会自动占用容器中的所有可用空间。

您需要做两件事,一件事是将高度设置为已经完成的100%。第二是将位置设置为绝对。这应该够了吧。

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

资源

选项之一是使用CSS表。它具有强大的浏览器支持,甚至可以在Internet Explorer 8中使用。

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>

尝试在htmlbody设置height:100%

html, 
body {
    height: 100%;
}

如果要2 div高度相同,请使用或设置父元素display:flex属性。

您可以在CSS中使用视口单元:

HTML:

<div id="my-div">Hello World!</div>

CSS:

#my-div {
    height: 100vh; /* vh stands for view-port height, 1vh is 1% of screen height */
}

有几种方法可以将<div>的高度设置为100%。

方法(A):

html,
body {
  height: 100%;
  min-height: 100%;
}
.div-left {
  height: 100%;
  width: 50%;
  background: green;
}
.div-right {
  height: 100%;
  width: 50%;
  background: gray;
}
<div class="div-left"></div>
<div class="div-right"></div>

使用vh的方法(B):

html,
body {
  height: 100%;
  min-height: 100%;
}
.div-left {
  height: 100vh;
  width: 50%;
  background: green;
  float: left;
}
.div-right {
  height: 100vh;
  width: 50%;
  background: gray;
  float: right;
}
<div class="div-left"></div>
<div class="div-right"></div>

使用弹性盒的方法(c):

html,
body {
  height: 100%;
  min-height: 100%;
}
.wrapper {
  height: 100%;
  min-height: 100%;
  display: flex;
}
.div-left {
  width: 50%;
  background: green;
}
.div-right {
  width: 50%;
  background: gray;
}
<div class="wrapper">
  <div class="div-left"></div>
  <div class="div-right"></div>
</div>

尝试以下CSS:

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

body {
    height: 100%;
}

#right {
    min-height: 100%;
}

在这种情况下,您可以使用vh ,它相对于视口高度1% ...

这意味着如果您想掩盖高度,只需使用100vh

请看下面我为您绘制的图像:

如何使div的浏览器窗口高度为100%?

试试我为您创建的代码段,如下所示:

.left {
  height: 100vh;
  width: 50%;
  background-color: grey;
  float: left;
}

.right {
  height: 100vh;
  width: 50%;
  background-color: red;
  float: right;
}
<div class="left"></div>
<div class="right"></div>

这与您之前的答案并不完全一样,但是对某些人可能会有所帮助:

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  margin: 0px;
}

#one {
  background-color: red;
}

#two {
  margin-top: 0px;
  background-color: black;
  color: white;
  overflow-y: scroll;
}

https://jsfiddle.net/newdark/qyxkk558/10/

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

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

如果要将div宽度或高度设置为浏览器窗口大小的100%,则应使用:

宽度: 100vw

高度: 100vh

或者,如果您想将其设置为较小的大小,请使用CSS calc函数。例:

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

默认情况下,块元素消耗其父级的全部宽度。

这就是他们满足其垂直堆叠设计要求的方式。

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>

可以使用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>

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

height: 100vh;

的HTML

   // vw: hundredths of the viewport width.
   // vh: hundredths of the viewport height.
   // vmin: hundredths of whichever is smaller, the viewport width or height.
   // vmax: hundredths of whichever is larger, the viewport width or height.

<div class="wrapper">
    <div class="left">
        Left
    </div>
    <div class="right">
        Right
    </div>
</div>

的CSS

<style>
    .wrapper {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        height: 100vh; // Height window (vh)
    }
    .wrapper .left{
        widht: 80%; // Width optional, but recommended
    }
    .wrapper .right{
        widht: 20%; // Width optional, but recommended
        background-color: #dd1f26;
    }
<style>

这些东西会根据以下内容自动调整内容的高度 您的浏览器。希望这对您有用。只是尝试这个例子 如下。

您只需要设置height:100%

html,body {
  height: 100%;
  margin: 0;
}
.content {
  height: 100%;
  min-height: 100%;
  position: relative;
}
.content-left {
  height: auto;
  min-height: 100%;
  float: left;
  background: #ddd;
  width: 50%;
  position: relative;
}

#one {
  background: url(http://cloud.niklausgerber.com/1a2n2I3J1h0M/red.png) center center no-repeat scroll  #aaa;
  width: 50%;
  position: relative;
  float: left;
}

#two {
 background: url(http://cloud.niklausgerber.com/1b0r2D2Z1y0J/dark-red.png) center center no-repeat scroll #520E24;
  width: 50%;
  float: left;
  position: relative;
  overflow-y: scroll;
}
<div class='content' id='one'></div>
<div class='content-left' id='two'></div>

实际上,最适合我的是使用vh属性。

在我的React应用程序中,我希望div即使调整大小也要与页面高匹配。我试过height: 100%;overflow-y: auto; ,但是在设置height:(your percent)vh;时它们都height:(your percent)vh;它按预期工作。

注意:如果使用填充,圆角等,请确保从vh属性百分比中减去这些值,否则会增加额外的高度并使滚动条出现。这是我的示例:

.frame {
  background-color: rgb(33, 2, 211);
  height: 96vh;
  padding: 1% 3% 2% 3%;
  border: 1px solid rgb(212, 248, 203);
  border-radius: 10px;
  display: grid;
  grid-gap: 5px;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: 50px 100px minmax(50px, 1fr) minmax(50px, 1fr) minmax(50px, 1fr);
}

您可以使用以下CSS将div设为浏览器窗口高度的100%:

display: block;
position: relative;
bottom: 0;
height: 100%;

100%的宽度和高度工作方式不同。

当您指定width: 100% ,表示“从父元素或窗口的宽度中获取可用宽度的100%”。

当您指定height: 100% ,仅表示“从父元素获取100%的可用高度”。这意味着,如果您未在顶级元素上指定高度,则所有子元素的高度将为0或父元素的高度,这就是为什么您需要将最顶层的元素的min-height为窗口高度。

我总是将主体的最小高度指定为100vh,这样可以轻松进行定位和计算,

body {
  min-height: 100vh;
}

尝试一次...

*{
  padding:0;
  margin:0;
}
.parent_div{
  overflow:hidden;
  clear:both;
  color:#fff;
  text-align:center;
}

.left_div {
  float: left;
  height: 100vh;
  width: 50%;
  background-color: blue;

}

.right_div {
  float: right;
  height: 100vh;
  width: 50%;
  background-color: green;

}
<div class=" parent_div">
  <div class="left_div">Left</div>
  <div class="right_div">Right</div>
</div>

最简单的方法是这样做。

div {
background: red;
height: 100vh;
}
body {
margin: 0px;
}
<div></div>

非常简单的解决方案 ,它支持跨域并且还支持浏览器调整大小

<div style="height: 100vh;">
   <iframe src="..." width="100%" height="80%"></iframe>
</div>

根据需要调整iframe height属性(将div height属性保留为100vh)。

为什么是80%?在我的实际场景中,我在div内有一个标头,位于iframe之前,该标头占用了一些垂直空间-因此我将iframe设置为使用80%而不是100%(否则将是包含div的高度,但是在标题之后开始,并溢出div的底部)。

即使这里给出了所有答案,我也惊讶地发现没有一个能真正解决问题。如果我使用100vh height / min-height ,则内容长于页面时,布局将中断。如果我改用100% height / min-height ,则当内容小于页面高度时,布局将中断。

我找到的解决了这两种情况的解决方案是合并前两个答案:

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

Related