我不知道为什么我的边框会在页面底部停止。 我尝试了很多东西：清除浮动，100％，jQuery，vh，vmax +我已经从stackoverflow读取了其他问题，但总是在底部之前停止。
我有两个div section.left和section.middle。我想在8 px div上设置section.left边框，从页面顶部到底部。但如果页面变长，它就会停止。
请参阅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;
}
答案 0 :(得分：5)
试试这个：
height: 100vmax section.left
display: flex添加到.wrapper 说明：
根据CSS Flexbox 的规则，子元素（又名flex项）将自动拉伸flex容器的cross-axis的全长。 （这就是为什么flexbox适用于相同高度列的原因。）但是，Flex项目上的height规则将覆盖此默认设置。所以我们删除了这个规则。
要了解有关flexbox的更多信息，请访问：
浏览器支持：
所有主流浏览器except IE 8 & 9都支持Flexbox。最近的一些浏览器版本，例如Safari 8和IE10，需要vendor prefixes。要快速添加所需的所有前缀，请在左侧面板中发布CSS：Autoprefixer。 this answer中的更多详细信息。
答案 1 :(得分：4)
如何将.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的底部
答案 2 :(得分：2)
CSS表解决方案：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;
}
假设中间部分总是更长
section.middle {
border-left:8px solid #60689D;
}
请参阅Codepen fork