html – 视口高度100%不在页面元素上工作

前端之家收集整理的这篇文章主要介绍了html – 视口高度100%不在页面元素上工作前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我不知道为什么我的边框在页面底部之前停止.我尝试了很多东西:清除浮动,100%,jQuery,vh,vmax我已经从stackoverflow读取了其他问题,但总是在底部之前停止.

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

demo

HTML

  1. <div class="wrapper">
  2. <section class="left">
  3. <header>
  4. <a class="logo" href="#"><img src="images/smallImage1.jpg" alt="logo"></a>
  5. </header>
  6. <div class="intro">
  7. <p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Sed posuere interdum sem. Quisque ligula eros ullamcorper quis,</p>
  8. <a class="contact" href="#">Contact</a>
  9. </div>
  10. <div class="skills">
  11. <h6>Skills</h6>
  12. <ul>
  13. <li>Skill 1</li>
  14. <li>Skill 2</li>
  15. </ul>
  16. </div>
  17. <footer>
  18. <p>2016 - Site 1</p>
  19. </footer>
  20. </section>
  21. <section class="midle">
  22. <div class="post">
  23. <h2>Headline</h2>
  24. <img src="images/bigImage1.jpg" alt="Big image">
  25. <p>Lorem ipsum dolor sit amet,lacinia quis facilisis sed sapien. Mauris varius diam vitae arcu. Sed arcu lectus auctor vitae,</p>
  26. <img src="images/bigImage2.jpg" alt="Big image">
  27. <img src="images/smallImage1.jpg" alt="Small image">
  28. <img src="images/bigImage1.jpg" alt="Big image">
  29. <p>Lorem ipsum dolor sit amet,</p>
  30. <img src="images/bigImage2.jpg" alt="Big image">
  31. </div>
  32. </section>
  33. </div> <!-- END OF WRAPPER -->

CSS

  1. html,body{
  2. height: auto;
  3. width: 100%;
  4. display: block;
  5. background-color: #F8F8F8;
  6. margin: 0;
  7. padding: 0;
  8. }
  9.  
  10. * {
  11. Box-sizing: border-Box;
  12. }
  13.  
  14. img{
  15. display: block;
  16. width: auto;
  17. max-width: 100%;
  18. height: auto;
  19. }
  20.  
  21. .wrapper{
  22. margin: 0 auto;
  23. width: 100%;
  24. height: auto;
  25. max-width: 1700px;
  26. padding: 0;
  27. overflow: hidden;
  28. }
  29.  
  30. /*---------------- END OF BASE ------------------------*/
  31.  
  32. section{
  33. float: left;
  34. margin: 0;
  35. padding: 0;
  36. position: relative;
  37. }
  38.  
  39. /*---------------- SECTION LEFT ------------------------*/
  40.  
  41. section.left{
  42. width: 20%;
  43. padding: 4% 2%;
  44. height: 100vmax;
  45. text-align: center;
  46. border-right: 8px solid #60689D;
  47. }
  48.  
  49. /*---------------- SECTION MIDLE ------------------------*/
  50.  
  51. section.midle{
  52. width: 80%;
  53. height: auto;
  54. display: block;
  55. overflow: hidden;
  56. }

解决方法

如何将.left边框设置为透明并添加将用作边框的伪元素.
  1. .wrapper:after {
  2. Box-sizing: border-Box;
  3. content: " ";
  4. display: block;
  5. width: 20%;
  6. padding: 4% 2%;
  7. height: 100%;
  8. text-align: center;
  9. border-right: 8px solid #60689D;
  10. position: absolute;
  11. left: 0;
  12. z-index:1;
  13. }

demo

这样,无论.left和.right之间的哪一个更长,边框将始终到达.wrapper的底部

猜你在找的HTML相关文章