Home/ Questions/Q 8742969
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-13T11:35:39+00:00

I am currently working on a HTML5 and CSS project and am having a

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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

    • 0