-2

I am currently working on CSS layout techniques to achieve a layout like below picture 

<div id="wrapper">
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</div>

I've tried

  • fixed poistion
  • calc
  • absolute position

but I want to know new ways of designing CSS layouts

Is there any other way to achieve the layout shown in above picture?

Solved

Edited This is what I want

http://jsfiddle.net/danield770/DVAcV/9/

Gangadhar Jannu
  • 4,136
  • 6
  • 29
  • 49
  • 3
    Do you want us to work for you?? – Gibbs Jul 22 '14 at 07:27
  • nice requirements. kindly work out on that and show us. we will also learn. – Suresh Ponnukalai Jul 22 '14 at 08:09
  • The thing is I've already tried all possible solutions before I've asked this question. http://stackoverflow.com/questions/18210241/fixed-header-footer-content-height-100-cause-undesired-vertical-scrolling I just want to know is there any possible alternative solutions. If you guys can do it just throw some light on that otherwise stay calm. – Gangadhar Jannu Jul 22 '14 at 08:22
  • and I dont want you guys work for me. If I wouldn't specified my requirements someone will answer use fixed positions, use absolute positions, use jquery to modify... like that. That's why I have specified my requirements and I've tried all possible solutions before I've asked this question – Gangadhar Jannu Jul 22 '14 at 08:33
  • @SureshPonnukalai I am working on my requirements. Thanks for ur advise – Gangadhar Jannu Jul 22 '14 at 08:34
  • @user3168736 No yaar. I will work for myself. I am trying all the possible solutions and I want to know if I can achieve in any other ways. – Gangadhar Jannu Jul 22 '14 at 08:36
  • @Gangadhar Jannu good to hear you have tried all possible solutions. Why you have not mentioned in your question like, this is what i have tried? can you guys help me on that? – Suresh Ponnukalai Jul 22 '14 at 08:37
  • @SureshPonnukalai Didn't you see the last line in question "I've tried fixed poistion, calc, absolute positions but I want to know new ways of designing CSS layouts" – Gangadhar Jannu Jul 22 '14 at 08:40
  • @GangadharJannu This is not a site where we will write code for you. This is where people come with there coding problems, this is not a problem. You just want to find all possible ways to design a certain layout, I would suggest deleting this question and start searching around more. Every way there is to make this layout will most probably be on this site somewhere, just look around. – Ruddy Jul 22 '14 at 08:42
  • each and every requirements I've specified because of many problems like http://code.tutsplus.com/tutorials/ios-5-fixed-positioning-and-content-scrolling--mobile-8332 – Gangadhar Jannu Jul 22 '14 at 08:44
  • @Ruddy Thanks for ur suggestions. I've heard that this site is a social network for programmers, developers and designers. I've been searching for different solutions to this kinda layout. I've tried fluid layouts for specifying header, footer, content in percentages later on I want to try some new ways of designing layouts. I've found some solutions and tried it already. The main motto of this question is to say I've tried all the specified requirements and to know is there any new ways to do that. – Gangadhar Jannu Jul 22 '14 at 08:50
  • @GangadharJannu I know exactly what your asking and I'm just telling you from personal experience on this site this question does not fit here. Hence the down-votes on your question. Feel free to leave it here but I doubt anyone else will answer it. – Ruddy Jul 22 '14 at 08:57
  • @Ruddy I'm not at all bother about down-votes. My main motto is learning. The reason I've commented is because of some sarcastic comments. Anyway I wont stop my learning because of down-votes. Thank you. – Gangadhar Jannu Jul 22 '14 at 09:22
  • @GangadharJannu You should be bothered about down-votes. Down-votes are not a way of showing "hate" and are not there to stop you from learning at all. They are there to show you what is good and bad, questions being down voted tend not to be answered as there are problems with the question that make them unsuitable for this site. You should take it as a sign that you should change something in your question to receive better answers or answers at all for that matter. – Ruddy Jul 22 '14 at 09:30
  • For all those who want to learn something new This is what I want to achieve: http://stackoverflow.com/questions/17643900/fixed-footer-changing-height-header-how-to-add-scroll-to-the-content-between-t – Gangadhar Jannu Jul 22 '14 at 19:17

1 Answers1

1

Using position: absolute; is necessary.

HTML: 

<div class="Wrapper">
    <div class="Header">header</div>
    <div class="Content">Content</div>
    <div class="FooterPush"></div>
</div>
<div class="Footer">Footer</div>

CSS:

* {
    margin: 0;
    padding: 0;
}
html, body {
    height: 100%;
}
.Header {
    background:blue;
    height:50px
}
.Content {
    overflow:auto;
    position: absolute;
    width:100%;
    top:50px;
    bottom:50px;
}
.Wrapper {
    min-height: 100%;
}
.Wrapper .FooterPush {
    height: 50px;
}
.Footer {
    clear: both;
    position: relative;
    margin-top: -50px;
    height: 50px;
    background:red;
}

Demo Here

Ruddy
  • 9,795
  • 5
  • 45
  • 66
Alien
  • 3,658
  • 1
  • 16
  • 33
  • 1
    Why are you answering this question? Do you not find it slightly rude that this person has come here and pretty much demanded that we do work for them? All you are doing with this answer is encouraging other users to do the same. You should comment to first see what the OP has tried (with code) and then go from there, not just do the work for them. – Ruddy Jul 22 '14 at 07:41
  • @Ruddy ,thank you for your recommendations and advice. – Alien Jul 22 '14 at 08:24
  • Leave the code up there or delete the answer as a whole. If you leave it like this its not really an answer (more of a comment) and will probably be down-voted and then deleted. I will roll it back to normal. – Ruddy Jul 22 '14 at 08:29
  • Thanks for your replies. But I've tried it already – Gangadhar Jannu Jul 22 '14 at 08:31