CSS - Полный липкий нижний колонтитул с постоянной шириной содержания

Question

Я хочу использовать CSS для создания «липкого» нижнего колонтитула, который придерживается нижней части страницы, если высота содержимого страницы не превышает высоту браузера. Однако я хочу, чтобы верхний и нижний колонтитулы заполняли всю ширину экрана, с блоком содержимого фиксированной ширины, между которыми простирается полная высота между ними. Самый близкий, который у меня есть, - это пример ниже, однако я не могу получить серый блок контента, чтобы заполнить всю высоту между заголовком и нижним колонтитулом.

<style type="text/css"> 
    body { 
     margin: 0; 
     padding: 0; 
     height: 100%; 
     background: #fff; 
    } 
    #wrapper { 
     min-height: 100%; 
     position: relative; 
    } 
    #header { 
     background: #ff0; 
     height: 40px; 
    } 
    #content { 
     padding: 10px; 
     padding-bottom: 40px; /* Height of the footer */ 
     width: 700px; 
     margin-left: auto; 
     margin-right: auto; 
     background: grey; 
     height: 100%; 
    } 
    #footer { 
     position: absolute; 
     bottom: 0px; 
     width: 100%; 
     height: 40px; /* Height of the footer */ 
     background: #6cf; 
    } 
</style> 

<div id="wrapper"> 
    <div id="header">Header</div> 
    <div id="content">Content</div> 
    <div id="footer">Footer</div> 
</div> 

Answer 1

Я считаю, что это то, что вы ищете:

html,body{ 
 
    height:100%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
#wrapper { 
 
    height: 100%; 
 
    position: relative; 
 
} 
 
#header { 
 
    background: #ff0; 
 
    height: 40px; 
 
} 
 
#content { 
 
    padding: 10px; 
 
    width: 700px; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    background: grey; 
 
    min-height: calc(100% - 40px - 40px - 20px); /* 100% - height of header - height of footer - vertical padding */ 
 
} 
 
#footer { 
 
    position: relative; 
 
    width: 100%; 
 
    height: 40px; /* Height of the footer */ 
 
    background: #6cf; 
 
}

<div id="wrapper"> 
 
    <div id="header">Header</div> 
 
    <div id="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec scelerisque at quam ut rutrum. Pellentesque at molestie leo, sit amet sagittis velit. Morbi dapibus ante finibus nulla finibus, eget semper risus lobortis. Nullam in metus non felis egestas hendrerit id non libero. Donec auctor non est ut venenatis. Nulla non tortor ac urna sodales sagittis. Sed blandit arcu a mi venenatis consectetur. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
 

 
Maecenas vel quam purus. Praesent sed eleifend felis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin posuere tristique consequat. Fusce congue tortor sed lorem eleifend, sit amet malesuada turpis varius. Pellentesque pretium, velit quis posuere dignissim, nisl velit eleifend nisi, eleifend scelerisque magna libero non nisl. Nullam dapibus sem a ligula cursus, a iaculis lacus scelerisque. Sed sed enim tincidunt, vehicula felis eu, gravida erat. Vestibulum lectus neque, lobortis a varius quis, vestibulum vitae dolor. Curabitur vitae rutrum diam. Nulla facilisi. Proin molestie mi rhoncus, feugiat metus sed, hendrerit risus. Cras et pulvinar tellus, in fringilla turpis. 
 

 
Praesent auctor tortor ut dolor fermentum, eu facilisis nisi congue. Donec ac nulla rhoncus, condimentum libero vitae, congue ligula. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis faucibus nisi at feugiat aliquam. Quisque tempus malesuada ligula sed ornare. Cras ac urna ut leo vehicula efficitur nec quis elit. Aenean rhoncus molestie neque eget porttitor. Quisque nec dignissim metus. Vivamus mattis sem in consectetur fringilla. 
 

 
Sed dapibus, eros in ultricies suscipit, sapien risus tincidunt nisi, ultricies efficitur mi justo vel massa. Vestibulum mollis fermentum augue, non suscipit mauris ullamcorper a. Praesent eu vulputate mauris. Suspendisse luctus nisi turpis, sit amet ultrices lorem molestie in. Nam vel lorem cursus, varius diam vitae, finibus sem. Duis ac euismod ligula. In hac habitasse platea dictumst. 
 

 
Cras tristique nisi at ex lacinia, id gravida nibh venenatis. Aliquam lorem urna, pulvinar a sem in, ullamcorper mollis arcu. Ut in ex vestibulum, rhoncus nisi eu, posuere diam. Ut at justo euismod, hendrerit est non, pharetra augue. Duis ut lacus enim. Nam rhoncus ornare sapien, vitae rhoncus dui placerat nec. Nulla pulvinar, leo ut semper posuere, ante odio dignissim nulla, ac vehicula nisl nisl id velit. Nam dictum leo nunc, in lobortis tellus imperdiet at. Sed turpis orci, dapibus a mollis vitae, dapibus eu tellus. Curabitur mauris felis, venenatis a mattis quis, venenatis et mauris. Aenean sodales turpis non fringilla iaculis. Morbi porta euismod ligula, in tincidunt nisl ullamcorper eget. Nullam aliquet eros eu maximus tincidunt. Ut rutrum quam nec eros lacinia blandit. Integer dignissim egestas diam sed ullamcorper. Aliquam cursus pharetra urna, ut tristique risus feugiat sit amet.</div> 
 
    <div id="footer">Footer</div> 
 
</div>

I используемый calc для этого, и некоторые браузеры еще не поддерживают его. Взгляните на this для получения дополнительной информации.