Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Making a central div fill the rest of the available space

Tags:

html

css

I am currently working on a HTML5 and CSS project and am having a problem getting the containers to display properly.

What I want to have is a header bar at the top, a wrapper that contains 2 other divs and then a footer at the bottom which is always at the bottom of the window or at the bottom of the content whichever is further down.

Here's a snippet:

html, body
{
	padding: 0;
	margin: 0;
}

#wrapper
{
	position: absolute;
	background-color: purple;
	height: 100%;
	width: 100%;
	margin-top: 0px;
}

header
{
	position: absolute;
	width: 100%;
	height: 80px;
	background-color: black;
	color: white;
}


#articleContainer
{
	background-color: blue;
	width: 75%;
	margin-left: auto;
	margin-right: auto;
	height: auto;
	margin-top: 80px;
}

#articleContent
{
	width: 70%;
	background-color: yellow;
	float: left;
}

#articleSideBar
{
	position: relative;
	width: 28%;
	background-color: green;
	float: right;
	margin-left: 2px;
	margin-right: 2px;
	display: inline;
	margin-top: 0px;
	float: right;
	height: auto;
}
<html>
	<head>
		<title>index</title>
		<link href="ArticleStyleSheet.css" rel="stylesheet" type="text/css" />
	</head>
	<body>
		<div id="wrapper">
			<header>
				Header
			</header>
			<div id="articleContainer">
				Article Container
				
				<div id="articleContent">
					The quick brown fox jumped over the lazy dogs back. All good men must come to the aid of the party
				</div>
				
				<div id="articleSidebar">
					Article Sidebar
				</div>
			</div>
		</div>
	</body>
</html>

At the moment the articleContainer is only the height of however many lines there are. What I want to have is the formContainer to fill the rest of the screen, I've tried adding the height: 100%; attribute but then this feels the form container over the screen size. I.e. a vertical scrollbar appears which is about the same height as the header. How can I get the formContainer to fill the available screen space without the scroll bar. However, if the content is larger than the form container should expand to fill the extra space.

Thanks for any help you can provide.

like image 207
Boardy Avatar asked Oct 18 '12 21:10

Boardy


1 Answers

If you really want a css3 solution the one you're looking for is setting height: calc(100% - 80px); on #articleContainer as demonstrated in this fiddle, however this will not work in all browsers.

Example using old flexbox model css:

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

#wrapper
{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    min-height: 100%;
    background-color: purple;
    width: 100%;
    margin-top: 0px;
}

header
{
    width: 100%;
    height: 80px;
    background-color: black;
    color: white;
}

#articleContainer {
    width: 75%;
    margin: auto;
    background-color: blue;
    display: -webkit-box;
    -webkit-box-flex: 1;
}

#articleContent
{
    width: 70%;
    background-color: yellow;
}

#articleSideBar
{
    position: relative;
    width: 28%;
    background-color: green;
    margin-left: 2px;
    margin-right: 2px;
    display: inline;
    margin-top: 0px;
    height: auto;
}​

same thing, but this time using new flexbox model css

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

#wrapper
{
    display: -webkit-flex;
    -webkit-flex-direction: column;
    min-height: 100%;
    background-color: purple;
    width: 100%;
    margin-top: 0px;
}

header
{
    width: 100%;
    height: 80px;
    background-color: black;
    color: white;
}

#articleContainer {
    width: 75%;
    margin: auto;
    background-color: blue;
    display: -webkit-flex;
    -webkit-flex: 1;
}

#articleContent
{
    width: 70%;
    background-color: yellow;
}

#articleSideBar
{
    position: relative;
    width: 28%;
    background-color: green;
    margin-left: 2px;
    margin-right: 2px;
    display: inline;
    margin-top: 0px;
    height: auto;
}​

version with only the paragraph in yellow

like image 138
xception Avatar answered Nov 15 '22 08:11

xception