Variable height header with scrollable content area filling remaining viewport area - css

I've seen versions of this simple problem raised a dozen times here and elsewhere on the web, but I haven't seen a solution that works for me yet so I'm asking it again.
I want a webpage with a variable height full width header (height based on contents). Below that I want a content area that fills the rest of the browser viewport. If the content is larger than the remaining space in the viewport then I want the content area to scroll.
I don't need this to work on IE6. I don't care whether the solution uses CSS, tables or a mixture of the two, just no frames and no Javascript.
For a bonus point fix a variable height footer to the bottom of the page.

This cannot be done with CSS/ tables alone unless you know how big your two containers will be ahead of time.
If you are willing to use a little bit of javascript this will works perfectly.
<style>
body, html
{
padding:0;
margin:0;
height:100%;
width:100%;
}
section, header
{
width:100%;
display:block;
}
section
{
background:red;
}
</style>
<script>
window.onload = window.onresize = function ()
{
document.getElementById("section").style.height = document.body.offsetHeight - document.getElementById("head").offsetHeight + "px";
}
</script>
<header id="head">
header
<br />
two
</header>
<section id="section">
scroll the rest
</section>

Related

CSS - Fill remaining height (dynamic content)

<div id="header">
<div>My</div>
<div>Header</div>
</div>
<div id="content"></div>
In the above markup, how can I get the content to fill the rest of the screen (no-scrolling)?
I know how to do this with absolute positions if the header was of a fixed height, but my header's height is dynamically set by its contents (so the site is responsive on mobile devices.)
Btw: I'm looking for a CSS only solution, because I think JavaScript is not made for this kind of task.
Thanks a lot,
The simpliest way is to draw the background in body and keep #content translucide. DEMO 1.
This way, you do not mind #header nor #content heights.
If you do not mind about IE7 and less, then display:table/table-row/table-cell taken from defaut display of HTML table elements can be what you need , in the case header has unknown height. DEMO 2
Your structure will need a bit of update in order to act as wished and to avoid gaps in layout render from header part to the content part.
If you reset display to be used as table properties, it will do so and can draw cols and rows.
Since it is only the row properties that will be usefull, Structure must be rendering as one single col and multiple rows.
Basic structure needs to turn this way :
<div id="header" class="row">
<div class="single">
<div>My</div>
<div>Header than can grow</div>
</div>
</div>
<div id="content" class="row">
<div class="single">
<p>My Content that will fill remaining space untill page has to scroll</p>
</div>
</div>
And basic CSS turns this way :
html, body {
height:100%;
width:100%;
margin:0;
}
body {
display:table;/* it will allow to grow over initial width specified */
/* table-layout:fixed; only if you want to control width within value specified*/
background:#edc;
}
.row {
display:table-row;/* we want these elements to stack on top of each other, not to become cells aside each other */
}
.single {
display:table-cell;/* this 'buffer' element is used to avoid layout to turn into multiple cols */
}
#content {
height:100%;/* since layout is the one taken from table properties, it means fill all space avalaible that #header doesn't use */
background:#cde;
}
In the case, *#header has a known*** height, it can be set in fixed or absolute position.
#content can be 100% height DEMO 3, better: min-height:100%; DEMO 4
display:flex could be useful too but for real young browser only :).
Example with display:flex;
html {
height:100%;
}
body {
margin:0;
min-height:100%;
background:#edc;
display:flex;
flex-direction:column;
}
#header {
/* nothing needed here */
}
#content {
flex:1;/* since it is the only one getting a flex attitude, it will fill up all space avalaible*/
background:yellow;
}

Bootstrap twitter fixed top smaller navigation menu

Is this even possible via Twitter Bootstrap
http://www.usatoday.com/opinion/
When you scroll down, only the menu portion should remain affixed in the top ? If anyone has handy jsfiddle version, it would be really nice.
You can get it working by taking the navbar and using the affix plugin. I have a (very rough) working example here: http://bootply.com/87472. The important bits are in the CSS:
header { //this is whatever is sitting above the navbar.
height:50px; //this can be set to anything, just make it match
//the data-offset-top in the HTML (see below)
}
.affix {
width:100%; //makes sure the "affixed" navbar stretches the full width
top:0; //makes it stick to the top when it gets there.
}
.affix + p { //this is whatever is sitting below the navbar
margin-top:70px; //set to the total height of your navbar
}
The bit in the HTML you need:
<div class="navbar navbar-default" data-spy="affix" data-offset-top="50">
As mentioned above, data-offset-top should match the total height of whatever element is sitting above your navbar.
As for the fancy effects, I would suggest you check out css transitions to make that magic happen.

scaling elements to fit browser window

The page in question is this: http://amytdatta.com/ironic-bironic (password: tyma) - it's a pre-release page for a new album I worked on, sorry!
I'd like to have the video and the text nav below scale and center to the browser window without the need for a scrollbar. I've tried all kinds of approaches using min height / max height but just can't seem to get the intended result. I'm guessing that I don't know which elements to target and how to target them.
Any advice for a good solid approach would be really appreciated. Also, since i'm using Virb I can only do overrides to the CSS, so I can't delete lines.
Thanks very much.
Without actually seeing your website since it's password protected I would suggest something along the lines of the folllowing:
You set a wrapper around your elements, in your case the nav and the video. And then set the CSS for the video and nav to have an auto margin. Which should center it both horizontally and verically. You might want to add a wrapper for the 2 components to keep them nicely stacked together and then put an auto margin on that wrapper, but the below should already work.
Html:
<div id="container">
<div id="nav"><!-- nav here --></div>
<div id="video"><!--video here--></div>
</div>
CSS:
#container {
width:100%;
height:100%;
}
#video{
margin:auto;
}
#nav {
margin:auto;
}

Stretch DIV to Bottom & Remove Scrollbar

I have a design where there is a header set at absolute position with a height of 379px. My content is also set at absolute position with top:232px as well. I am successfully getting the content div to stretch to the bottom of the page, however, because of the extra 232px even if the content does not pass the height of the window a vertical scroll bar is added.
I've looked around and have come across this topic posted which pretty much is the issue I'm having. Unfortunately, none of the solutions posted on that page have solved my problem. Here is my CSS code:
#wrapper { position:absolute; top:0; left:50%; width:1000px; height:100%; margin-left:-500px; }
#header { z-index:1; position:absolute; top:0px; background:url(../images/layout/backdrop.png) no-repeat; width:1000px; height:379px; }
#container {
position:relative;
top:232px;
bottom:0;
background-color:#d7d7d7;
width:739px;
height:100%;
min-height:100%;
margin-left:175px;
border:1px solid #000;
border-bottom:0;
border-top-right-radius:20px;
-moz-border-radius-topright:20px;
}
And the HTML Code:
<div id="wrapper">
<div id="header"></div>
<div id="container">
</div>
</div>
Seeing that nobody has been able to answer this, i'll post my solution to the problem.
Although I didn't exactly achieve it the way I wanted to which was to use strictly CSS, I still got it to stretch to the bottom using javascript with jQuery's library.
<script type="text/javascript">
//<![CDATA[
/*
Method calculates container height and stretches to bottom of page
if content does not fill entire space.
*/
function setHeight() {
// Get css values needed to compute height.
var topAttr = parseInt($('#container').css('top'), 10); // convert value to int...
var winHeight = $(window).height(); // get user's browser height...
var conHeight = $('#container').height(); // get container height...
// If the size of the container is less than the size of the user's window... resize.
if(conHeight < winHeight) {
var newHeight = (winHeight - topAttr) - 1; // calculate the new height....
$('#container').height(newHeight); // apply the height value to the container.
}
}
// Run as soon as page loads...
$(document).ready(function(){
setHeight();
});
// ]]>
I then, added a noscript block at the bottom of the text that appears in a red box asking the user to enable javascrpt...
<!-- DISPLAY IF USER HAS JAVA DISABLED -->
<noscript><div class="nojava">
It has been detected that you have disabled javascript from running. Please consider enabling javascript in that it will improve this website's functionality substantially.
</div></noscript>
<!-- DISPLAY IF USER HAS JAVA DISABLED -->
I'm sure there is someone out there that can
CSS Layout Help - Stretch div to bottom of page
http://jsfiddle.net/CZayc/

How do I force a DIV to extend down to the bottom of the screen?

This is probably not possible with CSS, but maybe I'm wrong:
I have a document structure like this:
BODY
DIV[A]
DIV[B]
DIV[A] is position:absolute with fixed with and centered on screen. It has no height setting.
DIV[B] is position:absolute with top:300px. This is the actual content DIV. Inside that, I position everything with position:absolute. Because I love position:absolute. It gives full control over positioning. No ugly text flow headaches... it's so nice.
Ok. But the problem now: DIV[B] is always only that height what I tell it to be. Now, maybe there's a cool CSS trick that would pull it always down to touch the bottom of the browser viewport?
To set the height to dynamically be the window height - DIV[A]'s height, you'll have to use JavaScript/jQuery and keep calling it with a SetTimeout.
Alternately, if it suits your needs, you can set DIV[B] to be position:fixed; bottom:0px;
<body onload="setupLayout();" >
...
<script language="javascript" type="text/javascript">
// ACTIVITIES TO RUN FOR THE PAGE
function setupLayout() {
setInterval('adjustLayout();', 1000);
}
// ADUST THE MAIN CONTAINER (content panel) LAYOUT
function adjustLayout() {
try {
var divB = $get('divB');
var divAHeight = 20px;
divB.style.height = document.body.clientHeight - divAHeight ;
}
catch (e) { }
}
</script>
</body>
#div_to_touch_the_bottom {
position:fixed;
bottom:0;
top:0;
left:25%;
right:25%;
}
This DIV will touch the bottom of viewport, you can modify its left and right according to your needs. I am not sure that this the answer you are lookign for but it could be a good start
When you want DIV to be a position:absolute, it should be in a position: relative container.
<div style="position: relative">
<div style="position: absolute; top: 300px">
<h3>Content Header</h3>
<!-- Content -->
</div>
</div>
So regarding your problem with DIV[B], you can mix between <table>s and <div>s.
I suppose DIV[A] is your header and DIV[B] your main content div and you would like to always have your content div take all the page when there is not a lot of text in it, right?
If I remember correctly, because I can't test it at the moment, you could:
html, body {
height: 100%;
}
DIV[B] {
height: 100%;
}
I think that should do the trick.
Edit: Here is a good example that might help you: http://www.xs4all.nl/~peterned/examples/csslayout1.html

Resources