/    Sign up×
Community /Pin to ProfileBookmark

Page 100% height or more

Copy linkTweet thisAlerts:
Apr 26.2013

Hello!

I hope that someone can help me.
My case: [URL=”http://jsfiddle.net/ZZBA4/2/”]http://jsfiddle.net/ZZBA4/2/[/URL]

What is the problem.
– I want CONTAINER height 100% of display or more if CONTENT has biger text.
– I want LEFT and RIGHT to be the same height as CONTAINER
– HEADER and FOOTER has fixed height. HEADER is on top, FOOTER is at bottom, and CONTENT is all over the midle area.
– I want that CONTEN is also 100% of page – (HEDER and FOOTER), or more if there is bigger text.

Thank you!

to post a comment
CSS

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@cannon303May 04.2013 — I don't think you can solve it easily. I have exactly the same issue and had to resort to jQuery. Use height: 100% on body and html selectors and then min-height:100% on wrapper / container div will go some way to fix it but won't solve it completely. Also using position:absolute instead of floats however you may not get your wrapper to wrap around your content divs. This may or may not be a problem for you. Also a nice neat trick which you may be able to adapt here: http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks That uses floats so may serve better. This really should be easier to do in CSS!

Hope that helps
Copy linkTweet thisAlerts:
@rtretheweyMay 04.2013 — You mean something like:
<i>
</i>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
&lt;meta charset="utf-8" /&gt;
&lt;title&gt;Fixed Header and Footer with Side Columns&lt;/title&gt;
&lt;style&gt;

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

#CONTAINER {
height:99.5%;
border:solid 2px red;
width:400px;
}

#LEFT {
float:left;
background-color:yellow;
width:20px;
height:100%;
}
#RIGHT{
float:right;
background-color:orange;
width:20px;
height:100%;
}
#CENTER {
position:relative; top:0; left:0;
margin-left:20px; margin-right:20px;
background-color:blue;
height:100%;
}

#HEAD{
position:absolute; top:0; left:0;
background-color:green;
width:100%;
height:5%;
min-height:33px;
}
#CONTENT{
position:absolute; top:5%; left:0;
background-color:pink;
width:100%;
height:90%;
margin:0px;
}
#FOOTER{
position:absolute; bottom:0; left:0;
background-color:purple;
width:100%;
height:5%;
min-height:33px;
}

&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id="CONTAINER"&gt;
&lt;div id="LEFT"&gt;&lt;/div&gt; <br/>
&lt;div id="RIGHT"&gt;&lt;/div&gt;
&lt;div id="CENTER"&gt;
&lt;div id="HEAD"&gt;&lt;/div&gt;
&lt;div id="CONTENT"&gt;&lt;/div&gt;
&lt;div id="FOOTER"&gt;&lt;/div&gt;
&lt;/div&gt;&lt;!-- end #CENTER --&gt;
&lt;/div&gt;&lt;!-- end #CONTAINER --&gt;
&lt;/body&gt;
&lt;/html&gt;

Keep in mind that 'padding' and 'border' properties add to the size of the element on the page, so when you mix fixed measurements in a flexible layout (ie. it responds to changes in window size), it gets complicated.
Copy linkTweet thisAlerts:
@rtretheweyMay 04.2013 — I'm sorry. I just realized that my example wouldn't really do everything you wanted. It mostly gets the structure right, but it doesn't flex. I'll take another run at it when I get a chance.
Copy linkTweet thisAlerts:
@cannon303May 05.2013 — I'm sorry. I just realized that my example wouldn't really do everything you wanted. It mostly gets the structure right, but it doesn't flex. I'll take another run at it when I get a chance.[/QUOTE]

Yes it would be great if you can solve it but don't think you will. The problem comes with forcing the container past the 100% viewport height should the content dictate, while still wrapping around all content divs.

But there's the challenge!
×

Success!

Help @tinkib spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.19,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...