Container with Height:100%

Return to article

Setting a container's height to 100% will stretch the container to the full height of its parent if it is absolutely positioned and it's parent's height is set.

<style type="text/css"> body { margin:0; padding:0; position:absolute; height:100%; background-color:orange; width:100%; } div.full { position:absolute; top:0; left:25%; width:50%; height:100%; background-color:white; padding:0 1em; } </style>

However, if the container's content is really long, the text spilling over will not force the container to stretch down along with it (as long as the web browser is standards compliant). The filler below should cause most browsers to scroll-- if not, shrink the size of the window to see the effect.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut id tortor eu nisl scelerisque euismod. Nulla facilisi. Nulla facilisi. Proin vel massa eu erat porttitor scelerisque. Aliquam vel massa quis libero convallis viverra. Pellentesque quis nibh eu nibh pulvinar varius. Vivamus elementum porttitor nibh. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras adipiscing pede a velit. Quisque tellus lacus, pellentesque et, nonummy sit amet, adipiscing a, wisi. Nulla quis sem. Nam convallis eleifend sapien.

Fusce quis mauris eu nisl ultrices lobortis. Nunc lectus. Aliquam et neque vel sapien tristique porta. Aliquam mattis leo vel orci. Donec velit leo, vulputate convallis, bibendum non, ultrices eget, wisi. Curabitur diam. Quisque felis mauris, interdum eget, faucibus id, iaculis non, sem. Donec sagittis. Sed rhoncus diam egestas est. Quisque consectetuer. Fusce gravida. Suspendisse cursus.

Aliquam ligula mi, vulputate quis, pharetra nec, vulputate ut, enim. Suspendisse ornare, purus eu sollicitudin commodo, dui velit adipiscing felis, vel dapibus ante dui in mauris. Mauris non eros sed diam ultrices ullamcorper. Sed non eros. Proin eu leo eget quam porttitor gravida. Donec leo felis, tincidunt id, tempus quis, pretium sed, erat. Vestibulum eu neque a lacus pharetra interdum. Nunc mi libero, semper non, convallis eget, fermentum non, leo. Nunc ullamcorper cursus orci. Sed enim. Aenean nec wisi ut nibh malesuada rhoncus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin in leo sit amet enim tempor elementum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam id enim. Sed faucibus euismod lorem. In hac habitasse platea dictumst.

Sed vel augue vitae orci tristique mollis. Nullam id turpis. Nunc neque. Proin faucibus. Nunc accumsan, quam id volutpat imperdiet, felis arcu pharetra ipsum, malesuada bibendum pede metus ut wisi. Ut eleifend, wisi ut tempor rutrum, diam lectus volutpat pede, a aliquam tortor nunc quis wisi. Etiam vestibulum odio. Nam ac est sit amet ante placerat commodo. Mauris urna lectus, feugiat at, pellentesque eu, laoreet blandit, libero. Vivamus commodo nisl id felis.

In ipsum mauris, mattis ut, tincidunt a, accumsan vitae, purus. Morbi ut ligula vel ante pulvinar adipiscing. Nulla interdum ipsum sit amet metus. Nulla non ante sed pede volutpat gravida. Pellentesque eu eros. Integer ligula dui, elementum euismod, consectetuer a, suscipit at, felis. Cras pharetra lorem ut lacus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Vivamus arcu. Duis libero massa, adipiscing quis, tempor ultricies, luctus sit amet, sem. Quisque a leo non enim rutrum vestibulum. Fusce nulla nunc, posuere non, scelerisque sit amet, elementum nec, justo. Integer ullamcorper. Morbi ut est. Quisque vel risus. Aenean euismod mauris porta augue. Etiam id odio vel libero pulvinar tristique. Proin sodales consequat tellus. Nullam ligula sapien, tristique et, bibendum nec, auctor non, leo.