我不知道为什么我的边框在页面底部之前停止.我尝试了很多东西:清除浮动,100%,jQuery,vh,vmax我已经从stackoverflow读取了其他问题,但总是在底部之前停止.
我有两个divs 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,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,</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;
- }