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

发布时间：2020-12-14 19:40:51 所属栏目：资源来源：网络整理

导读：我不知道为什么我的边框在页面底部之前停止.我尝试了很多东西：清除浮动,100％,jQuery,vh,vmax我已经从stackoverflow读取了其他问题,但总是在底部之前停止. 我有两个divs section.left和section.middle.我试图在section.left div上获得一个8 px边框,从页面顶

我不知道为什么我的边框在页面底部之前停止.我尝试了很多东西：清除浮动,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;
}

解决方法

如何将.left边框设置为透明并添加将用作边框的伪元素.

.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的底部

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!