CODEWITHSUNDEEP
htmlcssviewport
Bonttimo
Bonttimo

Reputation: 681

Viewport height 100% not working on page element

I have no idea why my border stops before the bottom of the page. I have tried lots of things: clearing floats, 100%, jQuery, vh, vmax + I have read other questions from stackoverflow but always it stops before the bottom.

I have two divs section.left and section.middle. I am trying to get an 8 px border on the section.left div to go from the top of the page to the bottom. But it stops if the page gets longer.

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

Upvotes: 6

Views: 2022

Answers (3)

DigitalDouble
DigitalDouble

Reputation: 1768

How about setting the .left border to transparent and adding a pseudo element that will serve as a border instead.

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

See demo

This way regardless which one between .left and .right is longer, the border will always reach the bottom of .wrapper

Upvotes: 4

Michael Benjamin
Michael Benjamin

Reputation: 371321

Try this:

  • Remove height: 100vmax from section.left
  • Add display: flex to .wrapper

Revised Codepen

Explanation:

Under the rules of CSS Flexbox, child elements (aka, flex items) will automatically stretch the full length of the cross-axis of the flex container. (This is why flexbox is great for equal height columns.) However, a height rule on a flex item will override this default setting. So we remove that rule.

To learn more about flexbox visit:

Browser support:

Flexbox is supported by all major browsers, except IE 8 & 9. Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes. For a quick way to add all the prefixes you need, post your CSS in the left panel here: Autoprefixer. More details in this answer.

Upvotes: 5

Aziz
Aziz

Reputation: 7783

EDIT

CSS Table solution: 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;
}

CodePen fork

Quick solution

assumes the middle section is always longer

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

See Codepen fork

Upvotes: 2

Related Questions