如何使div 100%的浏览器窗口高度？
mik*_*ike 2016 html css height
我有一个有两列的布局 - 左边div和右边div.
右边div有灰色background-color,我需要它根据用户浏览器窗口的高度垂直展开.现在是background-color最后一段内容的结尾div.
我试过了height:100%,min-height:100%;等等
Jam*_*lly 2707
有几个CSS3测量单位称为:
视口百分比(或视口相对)长度
什么是视口 - 百分比长度？
从以上链接的W3候选推荐标准:
视口百分比长度相对于初始包含块的大小.当初始包含块的高度或宽度改变时,它们相应地缩放.
这些单位是vh(视口高度),vw(视口宽度),vmin(视口最小长度)和vmax(视口最大长度).
如何使用它来使分隔符填满浏览器的高度？
对于这个问题,我们可以使用vh:1vh等于视口高度的1%.也就是说100vh,无论元素位于DOM树中的哪个位置,它都等于浏览器窗口的高度:
HTML
<div></div>
CSS
div {
height: 100vh;
}
这几乎就是所需要的.这是一个正在使用的JSFiddle示例.
哪些浏览器支持这些新单元？
除了Opera Mini之外,目前所有最新的主流浏览器都支持此功能.看看我是否可以使用...为进一步支持.
如何在多列中使用它？
在手头的问题的情况下,具有左和右分隔符,这是一个JSFiddle示例,显示涉及两个vh和的两列布局vw.
怎么100vh不同100%？
以此布局为例:
<body style="height:100%">
<div style="height:200px">
<p style="height:100%; display:block;">Hello, world!</p>
</div>
</body>
p此处的标记设置为100%高度,但由于其包含的div高度为200px,因此100%的200px变为200px,而不是 100%的body高度.100vh相反,使用意味着无论高度如何,p标签都将是100%body的div高度.看看这个随附的JSFiddle,可以轻松看到差异!
- 当元素实际上比视口高时滚动的奇怪行为.容器保持视口高度,内容流出容器.`min-height:100vh`似乎可以解决这个问题. (29认同)
- @DGDD适用于iOS Safari 6 +,Android Browser 4.4+,BlackBerry Browser 10.0和IEMobile 10.0.我不知道您使用的是哪种移动浏览器,但这些浏览器占据了所使用的移动浏览器的90%以上.此问题未指定在移动浏览器上工作的要求. (7认同)
- 移动警报：在 Chrome 移动设备上使用 vh 混乱，但不考虑其导航栏。然后用它覆盖页面的顶部。如果您在那里有菜单，这是一个严重的问题... (5认同)
Ari*_*ian 553
如果你想设置的高度<div>或任何元素,你应该设置的高度<body>,并<html>以100%了.然后你可以用100%:)设置元素的高度
这是一个例子:
body, html {
height: 100%;
}
#right {
height: 100%;
}
- 纠正我,如果我错了,但我认为你还需要设置div的所有父母的身高,实际工作 (102认同)
- @Qwerty,这是解决方案.设置css如下:`html {height:100%*块数; }`,`body {height:100%;}`,`#div {height:100%/块数; }`.所以,如果你有3个部分,它将是`html {height:300%; 身体{身高:100%; } #div {height:33.3%}` (8认同)
Tin*_*ter 273
如果你能够绝对定位你的元素,
position: absolute;
top: 0;
bottom: 0;
会做的.
- 这可以通过从文档流中取出元素并将其底部值固定到其父级的高度来实现.当您的内容超出其父级的高度时,这并不理想. (15认同)
- 这不起作用，当它的父母之一设置为`position:relative`并且其高度不是视口的100％时。它将顶部和底部调整到它的下一个相对或绝对祖先。 (2认同)
MrG*_*eek 137
您可以在CSS中使用view-port单元:
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 */
}
- @Lamar 你应该使用 `* { box-sizing: border-box; }` 以防止这种情况发生。 (2认同)
- 值得检查caniuse以支持视口单元上的浏览器：http://caniuse.com/#feat=viewport-units (2认同)
Ali*_*eza 116
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>- 给 100vh 为页面添加了垂直滚动，因此遵循了这个，但没有成功。/sf/ask/3125182581/出现。有什么方法可以避免垂直滚动并使 div 接触底部而没有任何内容吗？ (2认同)
- @DILEEPTHOMAS 看看 Alireza 提供的这个示例，它还有一个滚动条，因为 body 元素有一个边距。如果删除边距，滚动条就会消失。它可能有不同的原因，但我会首先检查这个。 (2认同)
小智 95
vh与flex模型解决方案相比,所有其他解决方案(包括排名靠前的解决方案)都是次优的.
随着CSS flex模型的出现,解决100%高度问题变得非常非常容易:height: 100%; display: flex在父flex: 1元素和子元素上使用.它们会自动占用容器中的所有可用空间.
注意标记和CSS有多简单.没有桌子或任何东西.
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模型的更多信息.
- 警告:当其中一个左/右容器的内容超过原始身高时,相反的容器将不会调整大小,因此容器最终会达到不同的高度. (3认同)
cle*_*tus 54
你没有提到一些重要的细节,如:
- 布局是否固定宽度？
- 列中的一列或两列是否固定宽度？
这是一种可能性:
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>根据需要固定的哪些柱和哪些柱是液体,有许多变化.您也可以通过绝对定位来实现这一点,但我通常会使用浮点数找到更好的结果(特别是在跨浏览器方面).
Maj*_*jda 33
这对我有用:
<div style="position:fixed; top:0px; left:0px; bottom:0px; right:0px; background: red;"> </div>使用position:fixed而不是position:absolute,即使向下滚动除法将扩展到屏幕的末尾.
- 带有“位置：[固定|绝对]”的代码非常适合弹出窗口的背景（例如当您单击缩放图片时），但在您需要实际向下滚动的情况下不太确定。面团还是有用的！ (2认同)
Jon*_*edt 29
这是高度的修复.
在你的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;
});
最后使用此函数将视口的高度添加到#your-object浏览器不支持的位置vh-units:
$(function() {
if (!Modernizr.cssvhunit) {
var windowH = $(window).height();
$('#your-object').css({'height':($(window).height())+'px'});
}
});
mac*_*ost 29
即使有了这里的所有答案，我还是惊讶地发现没有一个能真正解决问题。如果我使用100vh height/ min-height，当内容比页面长时布局会中断。如果我改为使用100% height/ min-height，则当内容小于页面高度时布局会中断。
我找到的解决方案解决了这两种情况，是结合前两个答案：
html, body, #mydiv {
height: 100%;
min-height: 100vh;
}
- 我有一个固定的 90px 高度导航栏，所以我只需将“100vh”更改为“calc(100vh - 90px)” (2认同)
Din*_*yan 23
100% 宽度和高度的工作方式不同.
指定时width: 100%,表示"从父元素或窗口宽度占用100%的可用宽度".
指定时height: 100%,它仅表示"占用父元素的可用高度的100%".这意味着如果你没有在顶级元素指定高度,所有子0节点的高度将是父节点的高度,这就是你需要将最顶层的元素设置为具有min-height窗口高度的原因.
我总是指定机身的最小高度为100vh,这使得定位和计算变得容易,
body {
min-height: 100vh;
}
小智 17
添加min-height: 100%并不指定高度(或将其置于自动).它完全为我完成了这项工作:
.container{
margin: auto;
background-color: #909090;
width: 60%;
padding: none;
min-height: 100%;
}
EMI*_*ILO 16
最简单的方法是这样做。
div {
background: red;
height: 100vh;
}
body {
margin: 0px;
}<div></div>小智 15
100vw ===视口宽度的100%.
100vh ===视口高度的100%.
如果要将div浏览器窗口大小的宽度或高度设置为100%,则应使用
宽度: 100vw
高度: 100vh
或者如果你想将它设置得更小,请使用css calc.例:
div
Web*_*ner 15
一个完整的页面称为“视口”，您可以在 CSS3 中根据其视口设计一个元素。
这些单位称为视口百分比长度，与初始包含块的大小有关。
- 视口高度称为
vh。页面的完整高度为 100vh。 - 视口宽度称为
vw。页面的完整高度为 100vw。 - 还有 vmin（视口最小长度）和 vmax（视口最大长度）。
所以现在，您可以通过将以下内容添加到 CSS 中轻松解决您的问题：
.classname-for-right-div /*You could also use an ID*/ {
height: 100vh;
}
小智 14
如果将html和body_ height 设置为 100%，它将覆盖整个页面。
如果你将任何特定的div最小高度设置为 100%，那么它将覆盖整个窗口，如下所示：
CSS
html, body {
height: 100%;
}
div#some-div {
min-height: 100%;
}
记住
仅当 div 的直接父级是body时，这才有效，因为百分比始终从直接父级继承，并且通过执行上述 CSS 代码，您将告诉 div从直接父级 ( body )继承高度 100%并使其成为您的最小值-高度：100%。
其他方式
只需将div高度设置为 100vh 即可。这意味着 100 视口高度。
CSS
div#some-div {
height: 100vh
}
tes*_*ing 12
这对我有用:
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 */
}
摘自此页面.
San*_*lse 12
有几种方法可用于将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>方法(B)使用vh:
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>Dmi*_*ind 12
2023 更新
人们发现，在移动设备上使用 100vh 设置元素高度并不可靠，因为浏览器 UI 可能会占用部分屏幕尺寸。到目前为止，计算真实高度的唯一方法是使用 JavaScript。然而，随着 2023 年新单位的引入，例如 dvh、lhv 和 svh，现在无需 JavaScript 即可实现动态高度。谷歌它以了解有关这些单位的更多信息。
新代码示例：
.yourElement {
height: 100vh; /* fallback */
height: 100dvh; /* dynamic viewport height */
}
Moh*_*ved 11
尝试设置height:100%在html&body
html,
body {
height: 100%;
}
如果你想要2 div高度相同使用或设置父元素display:flex属性.
这与您之前的答案并不完全相同，但可能对某些人有帮助：
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/
默认情况下,块元素占用其父元素的整个宽度.
这就是他们如何满足他们的设计要求,即垂直堆叠.
在块格式化上下文中,框从一个包含块的顶部开始一个接一个地垂直排列.
但是,此行为不会延伸到高度.
默认情况下,大多数元素是其内容的高度(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>小智 7
试试这个一次...
*{
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>Flexbox非常适合此类问题.虽然Flexbox主要用于在水平方向上布置内容,但Flexbox实际上也适用于垂直布局问题.您所要做的就是将垂直部分包装在Flex容器中,然后选择要扩展的部分.它们会自动占用容器中的所有可用空间.
其中一个选项是使用CSS表.它具有出色的浏览器支持,甚至适用于IE8.
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>试试这个 - 经过测试:
body {
min-height: 100%;
}
#right, #left {
height: 100%;
}
你需要做两件事,一件是将你已经做过的高度设置为100%.第二是将位置设置为绝对.这应该够了吧.
html,
body {
height: 100%;
min-height: 100%;
position: absolute;
}
- 过时的解决方案。使用`vh`代替。 (3认同)
- 如果您打算在移动设备上使用响应式设计，请不要使用 `vh`。 (2认同)
小智 5
尝试以下CSS：
html {
min-height: 100%;
margin: 0;
padding: 0;
}
body {
height: 100%;
}
#right {
min-height: 100%;
}
小智 5
你可以使用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>小智 5
.wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
height: 100vh; // Height window (vh)
}
.wrapper .left{
width: 80%; // Width optional, but recommended
}
.wrapper .right{
width: 20%; // Width optional, but recommended
background-color: #dd1f26;
}<!--
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>实际上，最适合我的是使用该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);
}
小智 5
现在使用高度：100vh；对于固定的窗口高度：
<style>
.header-top {
height: 100vh;
background: #000;
color: #FFF;
display: flex;
align-items: center;
padding: 10px;
justify-content: space-around;
}
.header-top ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
align-items: center;
}
.header-top ul li {
padding:0px 10px;
}
</style>
<div class="header-top">
<div class="logo">Hello</div>
<ul>
<li>Menu</li>
<li>About Us</li>
<li>Contact US</li>
<li>Login</li>
</ul>
</div>
| 归档时间： |
|
| 查看次数： |
1864919 次 |
| 最近记录： |