.col class set to 100% height (along with html, body, and .main-wrapper) and it works, but ...

Question

page gets too long, footer not visible and side scrollbar appears. Why is the page getting too long? I do not have extra space in the content pushing it down. why doesn't it work like Guil's?

Answer 1 · 2015-02-20T05:27:38Z

February 20, 2015 5:27am

Hello, I have same situation here. Columns get so long, even with files I downloaded from lesson ... What I realized is that it works if I place "content" in first place at page ie. so at this point don't really know how to make this work with columns ...

<div class="top-section">
  <p>This content takes up 100% of the viewport at the top</p>
  <a href="#" class="more">Learn More</a>
</div>
<div class="bottom-section">
  <p>This is the body content, and should appear just after the top section <strong>only when you scroll down</strong>.</p>
</div>

CSS is as follows

html, body{
  height:100%;
}
p{
  text-align:center;
}
.top-section{
  height:100%;
}
.more{
  display:block;
  position:absolute;
  bottom:20px;
  text-align:center;
}

Answer 2 · 2015-09-22T02:42:44Z

September 22, 2015 2:42am

This situation is quite tricky (for me at least) but it turns out to be simple when it's analyzed with the basics.

When a size (either height or width) is defined in terms of percentage, that is in relation to the size of the parent element. When all the ancestor elements' sizes, up to the root element (<html> in this case), are defined using percentages, those sizes are relative to the viewport's size. Since CSS is a "cascading" stylesheet, properties apply one after the other in hierarchic order, i.e.: <html> height of 100%, means its height is equal to viewport's height, <body> height of 100% means its height is equal to the <html>'s height and (by transitivity) to the viewport's hight and so for every other element down into the hierarchy (.main-wrapper and .col). Therefore .col now has a height equal to the viewport's height (just trying matching the columns with the browser window and modify it's height up and down).

Now it comes the weird part. Since on top of ".col" is the header and below is the footer (both with absolute heigths), .main-wrapper, <body> and <html> are successively stretched upwards and downwards by that content, ending up with an <html>, <body> and .main-wrapper elements larger than the viewport, but with columns spanning the same height of the viewport.

With this code, we don't get a sticky footer as Guil said, but rather we can have columns with the same height of the viewport, thus pushing the footer off the screen even when the columns' content isn't long enough to do so, avoiding having a footer in the middle of the viewport as it was previous to this modification.

I hope this explanation was didactic enough.

Greetings.

Answer 3 · 2015-02-13T08:46:36Z

February 13, 2015 8:46am

vertical-align: top;

This should do the trick. Add this to your .col class.

Answer 4 · 2015-02-15T19:52:56Z

February 15, 2015 7:52pm

Hello Nejc, That worked to solve your issue of uneven columns / whitespace at the top - It is not fixing my problem, though. My problem is that the columns get so long, a scroll bar appears at screen left and there is tons of whitespace under the content in my column.
I thought giving the columns a height of 100% would make them expand to fill the space between the banner and footer elements. Do I need to use a "sticky footer"? Still I am confused about why so much whitespace under the small amount of content in my columns.

Answer 5 · 2015-02-24T23:20:09Z

February 24, 2015 11:20pm

Hi,

I am having the same issue where the two columns are extending past the main-wrapper and causing scroll bars to appear. I created a sample project (see below) to isolate the issue and below is what I noticed when inspecting the output via the developers tools.

The html page has a main div (main-wrapper) that contains:

a div (div-table) containing a paragraph
two columns (div-col1 & div-col2)
footer (main-footer)

The main-wrapper fills the height of the browser exactly (I can see this by the white background color used on the main wrapper). The height of the main wrapper is 579px in the developers tools. When I check the columns, they have the exact same height of 579px, matching that of the main-wrapper. It appears as if the div-table is pushing the columns down, and the columns then ignore the bottom boundary of the main-wrapper and continue past for the full length of 579px. The columns do not adhere to their parent containers boundaries.

Here is my html:

'''<!DOCTYPE html> <html lang="en"> <head> <title>CSS Display Modes</title> <link rel="stylesheet" href="css/normalize.css" /> <link rel="stylesheet" href="css/style.css" /> </head> <body> <div class="main-wrapper">

        <div class="div-table">
            <p class="table-cell">display: table - useful to vertically align an element to the middle of its parent container</p>
        </div>

        <div class="div-col1 col">
            <h1>Column 1</h1>
            <p>Bacon ipsum dolor amet chuck short loin pancetta, cupim cow doner ham salami shankle t-bone shoulder. 
                Tri-tip leberkas boudin pork loin shank beef ribs short loin salami bacon pork filet mignon pork belly beef. 
                Pastrami sausage cow turducken ribeye. Jowl picanha landjaeger corned beef meatball alcatra. 
                Shoulder cupim sausage spare ribs, tail prosciutto swine ham. 
                Turducken biltong ground round, meatball beef ribs tenderloin ball tip pancetta chuck shankle leberkas pig bacon alcatra chicken.
                Filet mignon cupim short ribs flank cow, shank sirloin picanha tenderloin turducken jerky landjaeger.</p>
        </div>
        <div class="div-col2 col">
            <h1>Column 2</h1>
            <p>Corned beef landjaeger brisket ribeye salami boudin hamburger pastrami sausage porchetta chicken pig andouille tenderloin.
                Ham hock alcatra strip steak brisket, pancetta porchetta shank short loin shoulder chicken. 
                Swine drumstick kevin bresaola bacon turducken tri-tip doner meatball kielbasa. 
                Tri-tip leberkas pork filet mignon kielbasa frankfurter short loin, rump spare ribs corned beef ribeye porchetta. 
                Pork chop jowl tri-tip, chuck porchetta pork ham hock ribeye landjaeger chicken capicola frankfurter biltong ham. 
                Filet mignon meatball ham hock jowl t-bone andouille, ball tip doner. Kielbasa flank short loin boudin pork belly.</p>
        </div>
        <footer class="main-footer">
            <p>footer - some interesting stuff here</p>
        </footer>
    </div>

</body>

</html>'''

and here is the css:

'''.main-wrapper {background-color: white;} .main-header {background-color: steelblue;} .main-logo {background-color: tomato;} .table-div {background-color: sandybrown ;}

body { background-color: gainsboro; font: normal 1em/1.5 sans-serif; }

html, body, .main-wrapper, .col { height: 100%; }

{ box-sizing: border-box; }

.main-wrapper { padding: 10px; margin: auto; width: 90%; }

.div-table { height: 100px; display: table; width: 100%; }

.table-cell { border: 5px solid red; display: table-cell; vertical-align: middle; }

/* Columns Layout */

.col { display: inline-block; margin-right: -5px; vertical-align: top; }

.div-col1 { background-color: steelblue; width: 60%; padding: 10px; }

.div-col2 { background-color: goldenrod; width: 40%; padding: 10px; }

/* Footer Layout */

.main-footer { background-color: tomato; text-align: center; padding: 20px; }'''

This is very frustrating and your assistance is appreciated.

Answer 6 · 2015-02-28T20:22:26Z

February 28, 2015 8:22pm

So the way I am reading this, your columns (and mine) are matching the height of the wrapper, not occupying their respective space within it?

Welcome to the Treehouse Community

Looking to learn something new?

Laura Hill

Laura Hill

.col class set to 100% height (along with html, body, and .main-wrapper) and it works, but ...

6 Answers

santos mena

santos mena

Andrés Fernández

Andrés Fernández

Nejc Vukovic

Nejc Vukovic

Christina Wood

Christina Wood

Laura Hill

Laura Hill

Steven Muller

Steven Muller

Laura Hill

Laura Hill