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

HTML

泡芙Green

2020-03-13

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

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

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

第1421篇《如何使div的浏览器窗口高度为100％》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共27个回答

西门西门 2020.03.13

的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>

小卤蛋村村 2020.03.13

实际上，最适合我的是使用该vh物业。

在我的React应用程序中，我希望div即使调整大小也要与页面高匹配。我尝试了height: 100%;，overflow-y: auto;但是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);
}

神奇西里 2020.03.13

如果使用position: absolute;和jQuery，则可以使用

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

DavaidAPro 2020.03.13

尝试一次...

*{
  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>

番长阳光 2020.03.13

试试看-经过测试：

body {
  min-height: 100%;
}

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

小卤蛋卡卡西 2020.03.13

尝试以下CSS：

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

body {
    height: 100%;
}

#right {
    min-height: 100%;
}

伽罗L 2020.03.13

您可以使用display: flex和height: 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>

Tony阳光 2020.03.13

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

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

资源

白月光 2020.03.13

选项之一是使用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>

null 2020.03.13

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

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/

ItachiGreen 2020.03.13

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

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

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>

达蒙阿飞斯丁 2020.03.13

使用FlexBox CSS

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

TonyJinJin泡芙 2020.03.13

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

height: 100vh;

斌 2020.03.13

尝试设置height:100%在html＆body

html, 
body {
    height: 100%;
}

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

伽罗飞云 2020.03.13

这为我工作：

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 */
}

取自此页面。

LEYTom 2020.03.13

最简单的方法是这样做。

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

<div></div>

Davaid梅 2020.03.13

有几种方法可以将a的高度设置<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>

Davaid神无 2020.03.13

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

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

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

对于宽度： 100vw

对于身高： 100vh

或者，如果您想将其设置为较小的尺寸，请使用CSS calc函数。例：

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

LEY米亚 2020.03.13

100% 宽度和高度的工作原理不同。

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

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

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

body {
  min-height: 100vh;
}

凯老丝 2020.03.13

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

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

达蒙梅 2020.03.13

您没有提到一些重要的细节，例如：

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

这是一种可能性：

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>

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

Mandy古一 2020.03.13

vh与flex模型解决方案相比，所有其他解决方案（包括投票最多的解决方案）都不是最佳选择。

随着CSS flex模型的出现，解决100％高度问题变得非常非常容易：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模型的更多信息。

ProStafan 2020.03.13

这对我有用：

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

使用position:fixed代替position:absolute，即使您向下滚动该分区也会扩展到屏幕末端。

LEYJim 2020.03.13

vh在这种情况下，您可以使用相对于视口高度的1％ ...

这意味着如果您想掩盖高度，只需使用即可100vh。

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

试试我为您创建的代码段，如下所示：

.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>

老丝 2020.03.13

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

这是一个例子：

body, html {
  height: 100%;
}

#right {
  height: 100%;
}

Tom小宇宙 2020.03.13

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

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

会做到的。

null 2020.03.13

您可以在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 */
}

相似问题

基于react18+vite4+zustand网页端仿微信聊天实例

0 回答

基于tauri+vite4+pinia跨端后台管理系统应用

0 回答

HTML5 Drag与Drop 拖动时更改图标/光标

5 回答

如何完全卸载 Node.js，然后从头重新安装 (Mac OS X)

25 回答

基于tauri+vue3跨端聊天应用|tauri仿微信模板

0 回答

Ace Editor一款比较好用的展示代码组件

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android