页面元素的视口高度100%不起作用

Question

我不知道为什么我的边框会在页面底部之前停止。我尝试了很多方法：清除浮动、100%、jQuery、vh、vmax，并查阅了stackoverflow上的其他问题，但它总是在底部之前停止。

我有两个divs，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;
}

- Bonttimo

---

你是否在包装器上应用了clearfix？ - markoffden

@markoddden 我已经尝试过了，但没有任何作用。 - Bonttimo

Answer 1

尝试这个：

• 从 section.left 中删除 height: 100vmax
• 在 .wrapper 中添加 display: flex

修改后的 Codepen

---

说明：

根据CSS Flexbox规则，子元素（即flex项目）将自动在flex容器的交叉轴上拉伸至整个长度。 （这就是为什么Flexbox非常适合等高列的原因。）但是，在flex项目上使用height属性会覆盖这个默认设置。 因此，我们将删除该规则。

---

了解更多关于flexbox的内容请访问：

• Flexbox完全指南
• 使用Flexbox实现等高列
• 对齐Flex项目的方法

---

浏览器支持：

Flexbox得到了所有主流浏览器的支持，除IE 8和9以外。一些较新的浏览器版本，如Safari 8和IE10，需要厂商前缀。为了快速添加所需的所有前缀，请在此将您的CSS粘贴到左侧面板中：Autoprefixer。更多详情请查看这个答案。

- Michael Benjamin

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;
}

请查看演示

使用这种方法，无论是.left还是.right哪一个更长，边框都将始终达到.wrapper的底部。

- DigitalDouble

---

聪明，为什么不把section.left的边框去掉呢？ - Aziz

@DigitalDouble 一个大问题是我无法点击任何链接。 - Bonttimo

哦，是的，因为伪元素将会在.left上面。代码片段实际上是在.sections上设置了z-index: 2;。 - DigitalDouble

Answer 3

编辑

CSS表格解决方案：来自css-使子div的高度与最高的子div相同

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

---

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

请查看Codepen分支。

- Aziz

---

哦，我明白了，这是关于一列与另一列高度不同的问题，我会采用不同的方法，让较长的列获得边框属性。 - Aziz

有时候 section.left 比 section.middle 更长。我无法在 section.middle 上放置边框。 - Bonttimo

在这种情况下，您可以尝试从https://dev59.com/FWQn5IYBdhLWcg3wvpYV中获取的表格解决方案（更新答案）。 - Aziz