Как сделать футер всегда видимым внизу блока или экрана (если враппер больше чем экран)

Есть , содержащий список переменного размера и футер, который чуть ниже этого списка. В случае, если высота враппера меньше экрана, то все нормально. Как сделать так, что вслучае, когда высота враппера больше высоты экрана футер отображался внутри враппера, внизу экрана?

HTML

<div class="wrapper">
    <ul class="list">
        <li>0</li>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>9</li>
    </ul>
    <div class="footer">footer</div>
</div>

CSS

.wrapper {
    width: 720px;
    border: 1px solid #a3a6a1;
    display: block;
}

li {
    list-style-type: none;
    height: 60px;
    border: 2px solid green;
    padding: 10px;
    margin: 2px 20px;
}

.footer {
    height: 50px;
    border: 1px solid black;
    margin: 10px;
}