html - 视口(viewport)高度 100% 不适用于页面元素

Question

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

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

参见 demo

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

试试这个:

• 从 section.left 中移除 height: 100vmax
• 将display: flex添加到.wrapper

Revised Codepen

---

解释:

根据 CSS Flexbox 规则，子元素(也称为 flex 元素)将自动拉伸(stretch) cross-axis 的全长 flex 容器。 (这就是为什么 flexbox 非常适合等高列。)但是，flex 元素上的 height 规则将覆盖此默认设置。所以我们删除了该规则。

---

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

• A Complete Guide to Flexbox
• Equal Height Columns with Flexbox
• Methods for Aligning Flex Items

---

浏览器支持:

所有主流浏览器都支持 Flexbox，except IE 8 & 9 .一些最新的浏览器版本，例如 Safari 8 和 IE10，需要 vendor prefixes .要快速添加所需的所有前缀，请在此处的左侧面板中发布您的 CSS:Autoprefixer .更多详细信息，请参阅 this answer .