1

I have a design using some bootstrap styling which has a white column on the right. The height should be 100%, but it isn't rendering at 100%. It renders at 100% of the initial screen height, but when you scroll down it's no longer white.

I've looked at several other CSS solutions on this site. I've tried making all parent elements 100% height. I've tried making it a flexbox column. I've tried putting "position: relative;" in the body. Nothing has worked yet. I'd prefer not to use JS to achieve this.

Simplified version of my HTML:

<body>

<div class="container">
    <div class="main">

        <h1>This is the main content area</h1>
    </div>
    <div class="right pull-right">
        <div class="content">   
        </div>

        <div class="content">   
        </div>

        <div class="content">   
        </div>

        <div class="content">   
        </div>
    </div>

</div>
</body>

The CSS:

body,html {
    height: 100%;
    background-color: #aaa;
}
body {
    position: relative;
}
.main  {
        display: inline-block;
}

.container {
    height: 100%;
}
.right {
        display: inline-flex;
        flex-direction: column;
        background-color: #fff;
        width: 350px;
        height: 100%;  
        min-height: 100%;
        border: 1px solid #E1E6E9;      
        margin-right: 100px;
        position: absolute;
        right: 100px;
}
.content {
    height: 300px;
    min-height: 300px;
    margin: 10px 10px;
    background-color: #ccc;
    border: 1px solid #000;
}
Mike Risher
  • 35
  • 9

1 Answers1

0

Change your .right class to have height: auto; It will size itself to fit with its content.

.right {
        display: inline-flex;
        flex-direction: column;
        background-color: #fff;
        width: 350px;
        height: auto;  
        min-height: 100%;
        border: 1px solid #E1E6E9;      
        margin-right: 100px;
        position: absolute;
        right: 100px;
}

http://codepen.io/smlariviere/pen/WrWgxQ

Simon ML
  • 1,819
  • 2
  • 14
  • 32
  • Your solution is great and resolves the issue. Why does it work? height: auto; is the default setting. – Mike Risher Feb 17 '16 at 23:03
  • height: 100% means this container will take 100% of the height of its parent, if it has an explicit height. In your case, the parent is set to 100%, which make the problem bubble up until it reach the viewport height. Height : auto tell the element to fit its inner content instead of relying on the parents, which is what you were trying to achieve. check http://stackoverflow.com/questions/1622027/percentage-height-html-5-css for more info – Simon ML Feb 18 '16 at 15:49