视口高度 100% 不适用于页面元素

Question

我不知道为什么我的边框停在页面底部之前。 我已经尝试了很多事情：清除浮点数，100%，jQuery，vh，vmax + 我已经阅读了 Whosebug 的其他问题，但它总是在底部之前停止。

我有两个 div section.left 和 section.middle。我试图在 section.left div 上设置一个 8 px 边框，从页面顶部到底部。但是如果页面变长它就会停止。

HTML

<div class="wrapper">
    <section class="left">
        <header>
            <a class="logo" href="#"><img src="images/smallImage1.jpg" alt="Logo"></a>
        </header>
        <div class="intro">
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed posuere interdum sem. Quisque ligula eros ullamcorper quis,</p>
            <a class="contact" href="#">Contact</a>
        </div>
        <div class="skills">
            <h6>Skills</h6>
            <ul>
                <li>Skill 1</li>
                <li>Skill 2</li>
            </ul>
        </div>
        <footer>
            <p>2016 - Site 1</p>
        </footer>
    </section>
    <section class="midle">
        <div class="post">
                <h2>Headline</h2>
                <img src="images/bigImage1.jpg" alt="Big image">
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed posuere interdum sem. Quisque ligula eros ullamcorper quis, lacinia quis facilisis sed sapien. Mauris varius diam vitae arcu. Sed arcu lectus auctor vitae,</p>
                <img src="images/bigImage2.jpg" alt="Big image">
                <img src="images/smallImage1.jpg" alt="Small image">
                <img src="images/bigImage1.jpg" alt="Big image">
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed posuere interdum sem. Quisque ligula eros ullamcorper quis, lacinia quis facilisis sed sapien. Mauris varius diam vitae arcu. Sed arcu lectus auctor vitae,</p>
                <img src="images/bigImage2.jpg" alt="Big image">
        </div>
    </section>
</div> <!-- END OF WRAPPER -->

CSS

html, body{
    height: auto;
    width: 100%;
    display: block;
    background-color: #F8F8F8;
    margin: 0;
    padding: 0;
}

* {
  box-sizing: border-box;
}

img{
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
}

.wrapper{
    margin: 0 auto;
    width: 100%;
    height: auto;
    max-width: 1700px;
    padding: 0;
    overflow: hidden;
}

/*---------------- END OF BASE ------------------------*/

section{
    float: left;
    margin: 0;
    padding: 0;
    position: relative;
}

/*---------------- SECTION LEFT ------------------------*/

section.left{
    width: 20%;
    padding: 4% 2%;
    height: 100vmax;
    text-align: center;
    border-right: 8px solid #60689D;
}

/*---------------- SECTION MIDLE ------------------------*/

section.midle{
    width: 80%;
    height: auto;
    display: block;
    overflow: hidden;
}

Answer 1

编辑

CSSTable解法：taken from css- Make children divs the height of tallest child

.wrapper {
  margin: 0 auto;
  width: 100%;
  height: auto;
  max-width: 1700px;
  padding: 0;
  overflow: hidden;
  display: table; /* display parent as table */
}

section.left {
  width: 20%;
  padding: 4% 2%;
  height: 100vmax;
  text-align: center;
  border-right: 8px solid #60689D;
  display: table-cell; /* make child as table-cell */
  float:none; /* no floating! */
  vertical-align:top; /* align content to top */
}

section.middle {
  width: 80%;
  height: auto;
  display: table-cell; /* make child as table-cell */
  overflow: hidden;
}

CodePen fork

快速解决

假设中间部分总是更长

section.middle {
    border-left:8px solid #60689D;
}

见Codepen fork

Answer 2

如何将 .left 边框设置为 transparent 并添加一个将用作边框的伪元素。

.wrapper:after {
  box-sizing: border-box;
  content: " ";
  display: block;
  width: 20%;
  padding: 4% 2%;
  height: 100%;
  text-align: center;
  border-right: 8px solid #60689D;
  position: absolute;
  left: 0;
  z-index:1;
}

见demo

这样不管.left和.right哪一个长，边框总会到达.wrapper

的底部

Answer 3

试试这个：

从 section.left

height: 100vmax

将 display: flex 添加到 .wrapper

Revised Codepen

解释：

在 CSS Flexbox 的规则下，子元素（又名，flex items）将自动拉伸 flex 的全长容器。（这就是 flexbox 非常适合等高列的原因。）但是，flex 项目上的 height 规则将覆盖此默认设置。所以我们删除了该规则。

要了解有关 flexbox 的更多信息，请访问：

A Complete Guide to Flexbox

浏览器支持：

所有主流浏览器都支持 Flexbox，except IE 8 & 9. Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes. For a quick way to add all the prefixes you need, post your CSS in the left panel here: Autoprefixer. More details in 。

视口高度 100% 不适用于页面元素

Viewport height 100% not working on page element

html

css

viewport

编辑

快速解决