-1

Using HTML and CSS, I'm attempting to achieve a seemingly simply layout with three components : a stickied header, a stickied footer, and a middle area that is 100% of whatever space is left in the browser window. I'd also like my entire site to be centered horizontally.

I've searched for and applied various answers from this forum, but nothing seems to work once I start to apply new characteristics to the page.

I'd like to also absolute center what will be a horizontal table in the above-mentioned content area, as well as position elements in the header and footer -- But I can't seem to get the basics down. What am I doing wrong?

#site {
  max-width: 1024px;
  margin-left: auto;
  margin-right: auto;
}

#header {
  width: 1024px;
  height: 120px;
  display: table-cell;
  vertical-align: middle;
  background-color: aqua;
}

#content {
  width: 1024px;
  height: 100%;
  vertical-align: middle;
  background-color: red;
}

#footer {
  width: 1024px;
  height: 120px;
  display: table-cell;
  vertical-align: middle;
  background-color: aqua;
}

.logo { 
  display: inline-block;
  vertical-align: middle;
}

.item {
  display: table-cell;
}

.copy {
  font-size: 12pt;
  font-family: Arial;
  display: inline-block;
  vertical-align: middle;
}

.l1nk {
  display: inline-block;
  vertical-align: middle;
}

.l2nk {
  display: inline-block;
  vertical-align: middle;
}
<div id="site">
    <div id="header">
        <img class="logo" src="Images/logo.png" alt="logo" height="60" width="195" />
    </div>
    <div id="content">
        <img class="item" src="Images/item.png" alt="logo" height="150" width="150" />
    </div>
    <div id="footer">
        <div class="copy">xoxo &copy xoxo </div>
        <div class="l1nk">
            <a href="http://instagram.com/guiser_"><img src="Images/insta100.png" alt="instagram" height="25" width="25" /></a>
        </div>
        <div class="l2nk">
            <a href="https://twitter.com/guiser_"><img src="Images/twttr100.png" alt="twitter" height="25" width="25" /></a>
        </div>
    </div>

I'm new to this forum, and a novice programmer, so I'll roll with the punches. But I'd like a stronger foundation so that I can move forward with my code. Thanks so much

Minal Chauhan
  • 6,025
  • 8
  • 21
  • 41
tmw
  • 1
  • 1
  • 1
    Possible duplicate of [CSS Sticky Header/Footer and Fully Stretched Middle Area?](https://stackoverflow.com/questions/14543327/css-sticky-header-footer-and-fully-stretched-middle-area) – Obsidian Age Nov 07 '17 at 00:00
  • would you use flex and let only the middle area scroll when it needs to ? – G-Cyrillus Nov 07 '17 at 00:02
  • @Obsidian Age - I found and applied the solutions in that thread, and I couldn't get it to stick once I attempted to position other component. This may be due to my own inexperience, but that thread didn't solve my problem. – tmw Nov 07 '17 at 00:08
  • To be clear, Stack Overflow is not a forum and not open to ongoing discussions. This is a fact-based Q&A site where you can ask specific questions about a programming problem and received specific answers. – Rob Nov 07 '17 at 00:24
  • @Rob , the forum is also to advise, point at different direction to help, there are people here, not AIs building a redundant Q&A soup ... – G-Cyrillus Nov 07 '17 at 00:32
  • @G-Cyr Perhaps it's time for you, too, to [take the tour](https://stackoverflow.com/tour). – Rob Nov 07 '17 at 00:34
  • @rob, so fell free to clean up the place. and delete 90% of the question here :( ( a deleted question takes answers and comments away too ) There is real people here, you can't help it. – G-Cyrillus Nov 07 '17 at 00:43
  • @Rob on the other side, you could be kind enough to welcome new user and educate them ... – G-Cyrillus Nov 07 '17 at 00:48
  • @G-Cyr As I said, it's time to quit with your opinion of how SO should work and start realizing there are rules to be followed, such as not answering off-topic questions. – Rob Nov 07 '17 at 00:58

2 Answers2

0

Personal I would use flexbox to accomplish this but an easy way to do it as well with out having to learn flexbox looks a little something like this

https://jsfiddle.net/kriscoulson/2fqu03b2/

this one has content in the content block

https://jsfiddle.net/kriscoulson/2fqu03b2/1/

HTML

html, body {
  height: 100%;
  padding: 0;
  margin: 0;
}

.container {
  width: 1024px;
  height: 100%;
  position: relative;
}

.header {
  background-color: cyan;
  height: 120px;
}

.content {
  background-color: red;
  height: calc(100% - 240px); 
  overflow: auto;
}

.footer {
  width: 100%;
  height: 120px;
  background-color: cyan;
  position: absolute;
  bottom: 0;
}
<div class="container">
  <div class="header"> header </div>
  <div class="content"> content </div>
  <div class="footer"> footer </div>
</div>

You can use the calc function in css to help determine the height since you know that the header is 120px and the footer is 120px we know that is 240px total that the content will not take up.

// EDIT

This is with the use of flexbox if you are trying to learn flexbox to do it https://jsfiddle.net/kriscoulson/2fqu03b2/2/

html, body {
  height: 100%;
  padding: 0;
  margin: 0;
}

.container {
  width: 1024px;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.header {
  background-color: cyan;
  height: 120px;
}

.content {
  background-color: red;
  overflow: auto;
  flex: 1;
}

.footer {
  width: 100%;
  height: 120px;
  background-color: cyan;
  justify-content: flex-end;
}
<div class="container">
  <div class="header"> header </div>
  <div class="content"> <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus fugit atque magni quis at, voluptate consectetur voluptates laboriosam distinctio beatae quos sunt architecto? Quis nihil optio incidunt a, ad iure!</div>
  <div>Obcaecati expedita maiores ab. Tempora alias culpa, error quasi, quia delectus. Ratione, sapiente, at repellendus aspernatur debitis nesciunt eum fuga quibusdam in, suscipit omnis minima vero error perspiciatis, eaque corrupti?</div>
  <div>Ullam praesentium doloremque inventore! Similique dolor delectus, consequatur at doloremque quibusdam sed ullam officiis molestias dignissimos doloribus in obcaecati explicabo ipsum ducimus et error, atque. Itaque consequatur perspiciatis dignissimos eligendi!</div>
  <div>Maxime natus asperiores autem nobis in dicta necessitatibus consequuntur et expedita architecto molestias veniam, voluptate adipisci corporis qui sed modi sunt saepe sapiente vel voluptatem placeat facere nihil repudiandae. Cumque?</div>
  <div>Rerum quod asperiores reprehenderit itaque sunt repellat natus nostrum, modi exercitationem impedit odit adipisci voluptates, facilis eligendi eum ex accusamus tenetur omnis fugiat iste provident ipsa earum. Optio, culpa, repudiandae.</div>
  <div>Quo amet ex obcaecati natus, nesciunt accusamus eius laudantium magni id. Dolorum mollitia ab nam saepe excepturi, sapiente quisquam ducimus, perspiciatis obcaecati modi qui, sit laborum vero vitae cumque sequi!</div>
  <div>Repudiandae laborum ducimus totam! Neque aliquam alias necessitatibus praesentium numquam fuga totam inventore quis ab tempore aliquid dolore, similique voluptatem ipsam nisi earum ea quidem dolor, optio quibusdam? Sed, corrupti.</div>
  <div>Culpa a quos, explicabo adipisci pariatur impedit obcaecati consectetur aut maxime architecto eos facere ex voluptate provident iste blanditiis sed laboriosam magni aspernatur esse corrupti quasi quod! Officiis corrupti, voluptatibus.</div>
  <div>Optio sunt ipsam, et esse libero consequatur maiores illum nihil ad asperiores sed rem soluta sapiente quia nobis voluptatem, velit pariatur sint non aperiam, nostrum. Dolorum officiis, amet tenetur odio?</div>
  <div>Culpa dicta in soluta, cum, sapiente natus atque, vitae, laudantium ipsam dolorem obcaecati ad quibusdam. Accusantium consequatur sit odit minima, omnis nihil unde pariatur. Distinctio doloremque earum, deserunt doloribus culpa.</div>
  <div>Doloribus nobis, minima animi. Rerum magni hic dicta iste, laborum similique, sed corrupti accusamus ad quam assumenda ab consectetur suscipit nostrum. Sapiente aliquid, voluptatibus eius optio modi tenetur, unde iure.</div>
  <div>Impedit, dicta, atque nesciunt quos laboriosam facilis, nihil assumenda officiis omnis reiciendis iste quisquam asperiores eveniet ad corrupti error voluptatum consectetur velit neque. Minima distinctio, corporis expedita eius sapiente cumque?</div>
  <div>Repellendus tempora rem corporis ullam soluta est veritatis, itaque! Quo fugit dicta minus obcaecati minima repellendus numquam, ipsam non eligendi porro exercitationem nesciunt vel similique nemo necessitatibus dolorem dolorum id?</div>
  <div>Ad obcaecati voluptas nobis veniam explicabo ut atque eaque itaque, magni sed, veritatis totam ea, repellendus in quia iure soluta suscipit aliquam? Adipisci fugit ipsum delectus nisi vitae, veritatis ducimus.</div>
  <div>Dolorem inventore facere doloremque quod excepturi. Quo nostrum non quaerat pariatur. Pariatur necessitatibus deleniti ea dolores ut sequi saepe sint nulla. Minima harum explicabo voluptate sunt, adipisci quisquam delectus distinctio.</div>
  <div>Neque, numquam libero tempora harum accusantium tempore veniam reprehenderit ea ratione, delectus alias molestias reiciendis eos cumque labore nulla quasi aliquam qui eaque accusamus dolor iste sed veritatis? Maxime, cum!</div>
  <div>Reiciendis veritatis recusandae aliquid eos laudantium culpa, consectetur aspernatur voluptate expedita? Explicabo, quisquam! Alias mollitia velit nesciunt, tempore ipsum distinctio, iusto, quidem dolor odio consequatur, ipsa iste. Repellendus veritatis, quas?</div>
  <div>Quos omnis repudiandae, corrupti consequuntur culpa. Magnam aperiam, ad accusantium consequuntur. Nemo iure ab temporibus molestias et nesciunt eum excepturi magni, ipsum quae, molestiae eaque reprehenderit voluptatem! Fugit, praesentium, beatae!</div>
  <div>Sit officia, quasi veritatis sint inventore odit consequatur iusto et ex sequi nihil quisquam praesentium, quos neque eum. Atque recusandae dolorum illum iusto consectetur dolores maiores blanditiis! Libero, explicabo officiis?</div>
  <div>Ratione repudiandae ad officia quas nemo eos molestias quasi, perferendis facere, aspernatur. Aliquid nobis est dolor natus soluta harum veniam enim deserunt sint. Unde corrupti magni nobis, non a, necessitatibus.</div> </div>
  <div class="footer"> footer </div>
</div>
Minal Chauhan
  • 6,025
  • 8
  • 21
  • 41
Enjayy
  • 1,074
  • 8
  • 18
-1

I'll go with the flex option while i was waiting for a feed back about it. ...

header,
footer {
  background: tomato;
  min-height: 15vh;/* any height is fine actually, mind some room for main if small window ... header& footer should not be covering the entire window */
  display: flex;/* to dispatch children */
  flex-direction: column;/* not in a row ! */
}

main {
  background: turquoise;
  flex: 1;/* fill up entire space */
  overflow: auto;/* if space too small, let me scroll */
  display: flex;/* to easy center content */
  flex-direction: column;/* lets behave as block container */
}

div {
  margin: auto;/* flex children will center on both axis , an easy one !*/
}

body {
  max-width: 1024px;/* so it can shrink beloww , else remove the max- prefix */
  height: 100vh;/* window's height */
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

main:hover div:after {
  display: block;
  content: 'test';
  height: 200vh;
}
<header>
  <div>
    <h1>header</h1>
  </div>
</header>
<main>
  <div>main, hover me to make me taller and scroll</div>
</main>
<footer>
  <div>footer </div>
</footer>

for the display table-layout, you should start from body :

html, body {
  height:100%;
  margin:0;
}
body {
  width:1024px;
  margin:auto;
  display:table;
}
header,footer,main {
  display:table-row;
}
header>div,main>div,footer>div {
  display:table-cell;
  vertical-align:middle;
}
main {
  height:100%;
  background:turquoise;
}
footer,header {
  height:120px;
  background:tomato;
}
<header>
  <div>
    <h1>header</h1>
  </div>
</header>
<main>
  <div>main content, i will not scroll, i will push the footer</div>
</main>
<footer>
  <div>footer </div>
</footer>
G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129