提问



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


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


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

最佳参考


有几个CSS3测量单位称为:


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



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



来自上述联系的W3候选人建议书:[100]



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



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


如何使用它来使分隔符填满浏览器的高度?



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


HTML



<div></div>


CSS



div {
    height:100vh;
}


这实际上就是所有需要的。这里有一个 JSFiddle示例[101]


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



除了Opera Mini之外,目前所有最新的主流浏览器都支持此功能。我可以使用...获取进一步的支持。[102]


如何在多列中使用它?



对于手头的问题,以左右分隔符为特色,这里是一个JSFiddle示例,显示了涉及vhvw的两列布局。[103]


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标签将是body的100%高度,而不管div高度。看看这个随附的JSFiddle,可以轻松看到差异![104]

其它参考1


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


这是一个例子:


body, html {
  height: 100%;
}

#right {
  height: 100%;
}

其它参考2


如果你能够绝对定位你的元素,


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


会这样做的。

其它参考3


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

其它参考4


与flex模型解决方案相比,所有其他解决方案,包括vh的最高投票解决方案都是次优的。[105]


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


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


所有主流浏览器以及IE11 +都支持flex模型。[107]




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>



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



  • 布局是否固定宽度?

  • 其中一列或两列是否固定宽度?



这是一种可能性:




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>



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


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


看看我在这里为你画的图片:


[108]


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




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



这是对高度的修正。


在你的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'});
    }
});

其它参考5


这对我有用:


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


使用position:fixed代替position:absolute,即使向下滚动分割也会扩展到屏幕的末尾。

其它参考6


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


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

其它参考7


这对我有用:


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

#wrapper {
    min-height: 100%; /* min. height for modern browser */
    height:auto !important; /* important rule for modern Browser */
    height:100%; /* min. height for IE */
    overflow: hidden !important; /* FF scroll-bar */
}


摘自此页。[109]

其它参考8


有几种方法可用于将<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>



尝试在html中设置height:100%& body


html, 
body {
    height: 100%;
}


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

其它参考9


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


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


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


宽度:100vw


身高:100vh


或者如果你想将它设置得更小,请使用css calc function。例:


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

其它参考10


使用FlexBox CSS [110]


Flexbox非常适合此类问题。虽然Flexbox主要用于在水平方向上布置内容,但Flexbox实际上也适用于垂直布局问题。您所要做的就是将垂直部分包装在Flex容器中,然后选择要扩展的部分。它们会自动占用容器中的所有可用空间。

其它参考11


其中一个选项是使用CSS表。它具有出色的浏览器支持,甚至适用于IE8。


JSFiddle示例 [111]




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>



默认情况下,块元素占用其父元素的整个宽度。


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



   9.4.1块格式化
  上下文
[112]

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



但是,此行为不会延伸到高度。


默认情况下,大多数元素是其内容的高度(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>



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


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


[113]

其它参考12


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



试试这个 - 测试过:


body {
  min-height: 100%;
}

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

其它参考13


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


height:100vh;

其它参考14


 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>

其它参考15


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


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

其它参考16


尝试以下css:


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

body {
    height: 100%;
}

#right {
    min-height: 100%;
}

其它参考17


最简单的:




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>



这里的内容与您上面的内容不完全相同但可能对某些内容有所帮助。


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/[114]

其它参考18



  这个东西会根据自动调整内容的高度
  你的浏览器。我希望这对你有用。试试这个例子
  吼叫。



您只需设置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>



虽然这个解决方案是使用jQuery完成的,但是对于任何符合屏幕尺寸的人来说,这可能是有用的。


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


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>


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


第二种方法通过获取正文的高度来获取向用户显示的页面高度,然后减去标题大小以了解显示列的高度。