I have a web page with a header, content and footer.
There is a background image in the content. I would like the image to fill the remaining space between the header and footer. There are divs that are children of the content div with the image that will sometimes have content and other times will not.
HTML:
<body>
<div id='main'>
<div id='header'>
<div id='logoCompany'>
<img class='headerGraphics' src='Graphics\logo smaller.jpg'><img class='headerGraphics' src='Graphics\Marvelous Header3 small.png'>
</div>
</div>
<div id='contentParent' class='floatClear'>
<div id='content' style = "text-align: center;">
<div id='leftPane'>
Left Col
</div>
<div id='rightPane'>
Right Col
</div>
</div>
</div>
<div id='footer'>
Footer
</div>
</div>
</body>
CSS:
* {
margin: 0px;
}
.floatClear {
clear: both;
}
.headerGraphics {
display: inline;
}
#header {
background: #023489;
text-align: center;
}
#logoCompany {
display: inline;
}
#contentParent {
height: 373px;
width: 100%;
background-image: url(../Graphics/background.jpg);
}
#leftPane {
background: yellow;
float: left;
margin: 100px 0 0 10%;
opacity: .5;
width:40%;
}
#rightPane {
background: green;
float: right;
margin: 100px 10% 0 0;
opacity: .5;
width:40%;
}
#footer {
width:100%;
}
I tried height: 100% but I suspect this fails without content. In fact I think that's why everything fails except when I hard code a height. But that is not a good solution for obvious reasons.
Here's an example
Anyone have any ideas how to make this work?
EDIT:
I tried changing this:
#contentParent {
height: 373px;
width: 100%;
background-image: url(../Graphics/background.jpg);
}
to this:
#contentParent {
flex: 1;
background-image: url(../Graphics/background.jpg);
}
But it shrunk the div to the size of the child div, making things worse..
Here is a solution which defines header, footer and #contentParent as position: fixed and gives #contentParent 100% height minus the height of header and footer (= 80px in this example - this depends on your own settings).
Any additional content has to be added inside #contentParent - this element will then scroll since it has overflow-y:auto;. The header and footer will always remain on the screen due to their absolute position and won't cover any part of the content since #contentParent has according margins at top and bottom which equal the height of the header and footer.
The background image will cover #contentParent completely and won't scroll diue to background-attachment: fixed (integrated in the shortcut background property)
html,
body,
#main {
height: 100%;
margin: 0px;
}
.floatClear {
clear: both;
}
.headerGraphics {
display: inline;
}
#header {
position: fixed;
top: 0;
width: 100%;
height: 40px;
background: #023489;
text-align: center;
}
#logoCompany {
display: inline;
}
#contentParent {
position: fixed;
height: calc(100% - 80px);
width: 100%;
overflow-Y: auto;
margin: 40px 0;
background: url(http://placehold.it/1500x800/fc7) center center no-repeat;
background-position: fixed;
background-size: cover;
}
#leftPane {
background: yellow;
float: left;
margin: 100px 0 0 10%;
opacity: .5;
width: 40%;
}
#rightPane {
background: green;
float: right;
margin: 100px 10% 0 0;
opacity: .5;
width: 40%;
}
#footer {
position: fixed;
bottom: 0;
width: 100%;
height: 40px;
width: 100%;
background: lightblue;
}
<body>
<div id='main'>
<div id='header'>
<div id='logoCompany'>
<img class='headerGraphics' src='Graphics\logo smaller.jpg'><img class='headerGraphics' src='Graphics\Marvelous Header3 small.png'>
</div>
</div>
<div id='contentParent' class='floatClear'>
<div id='content' style="text-align: center;">
<div id='leftPane'>
Left Col
</div>
<div id='rightPane'>
Right Col
</div>
</div>
</div>
<div id='footer'>
Footer
</div>
</div>
</body>
You can do that using flexbox,
here is a simplified version from your code.
body {
margin: 0
}
#main {
display: flex;
flex-direction: column;
height: 100vh
}
#header,
#footer {
background: green;
padding: 10px;
}
#contentParent {
flex: 1;
background: red;
}
#content {
display: flex;
justify-content:center;
align-items:center;
height:100%
}
<div id='main'>
<div id='header'>
<div id='logoCompany'>
Logo Name
</div>
</div>
<div id='contentParent'>
<div id='content'>
<div id='leftPane'>
Left Col
</div>
<div id='rightPane'>
Right Col
</div>
</div>
</div>
<div id='footer'>
Footer
</div>
</div>
Not sure if I understood your question correctly, but if you want to display stretch the image over the whole screen you can use the css tag:
background-size: cover;
You can read more here about the css tag
Related
I have the following layout for my onepage site, I've never made one before so it is very much a learning curve.
The only issue I can currently see with this is when I shrink the height of the page, the div size also shrinks, even when I add min-height: 800px;. What can I do to get around this issue? (If I didn't explain this properly, use my code and shrink the height of your page so you can only just see the background-colors, then scroll, you will notice that in fact, the height is not 800px),
div.top,
div.mid,
div.bottom {
height: 100vh;
min-height: 800px;
width: 100%;
position: absolute;
left: 0;
right: 0;
}
div.top {
background-color: red;
top: 0;
}
div.mid {
background-color: blue;
top: 100vh;
}
div.bottom {
background-color: yellow;
top: 200vh;
}
<div class="top">
<h1>Top</h1>
</div>
<div class="mid">
<h1>Mid</h1>
</div>
<div class="bottom">
<h1>Bottom</h1>
</div>
EDIT: To explain why I am using position: absolute
I use position: absolute so that I am able to use top left and right so that I don't have the margin around each div.
Without absolute
With absolute
body {
margin: 0;
}
.top, .mid, .bot {
height: 100vh;
min-height: 800px;
width: 100%;
}
.top {
background: red;
}
.mid {
background: blue;
}
.bot {
background: green;
}
<div class="top">
<span>top</span>
</div>
<div class="mid">
<span>mid</span>
</div>
<div class="bot">
<span>bot</span>
</div>
Your 'margin' is coming from the H1 tag, removed that and the gap disappears from between the divs. I've removed the absolute positioning and left / right / top values because they are redundant with the removal of the margin:
div.top,
div.mid,
div.bottom {
height: 100vh;
min-height: 800px;
width: 100%;
}
h1 {
margin-top: 0;
}
div.top {
background-color: red;
}
div.mid {
background-color: blue;
}
div.bottom {
background-color: yellow;
}
<div class="top">
<h1>Top</h1>
</div>
<div class="mid">
<h1>Mid</h1>
</div>
<div class="bottom">
<h1>Bottom</h1>
</div>
I am developing a site where I have a fixed header and a fixed footer. I am trying to get my content to be full page when there is not enough content and still be scrollable when there is.
What I have so far does this, but I am left with some extra space at the end of my page. How can I get rid of this extra space at the bottom?
Here is a jsFiddle: http://jsfiddle.net/0yz9nx35/1/
As you can see in the fiddle there is still a scrollbar showing empty space at the bottom of my page
My code:
<div class="wrapper">
<div class="header"></div>
<div class="content"></div>
<div class="footer"></div>
</div>
CSS:
html { height: 100%; margin: 0px; padding: 0px; }
body { height: 100%; margin: 0px; padding: 0px;}
.wrapper { min-height: 100%; height: 100%; padding-top: 60px; }
.header { position: fixed; top:0px; left:0px; height:60px; background-color: #333; width: 100%;}
.footer { position: fixed; bottom:0px; left:0px; height:50px; background-color: #333; width: 100%;}
You can use that on the wrapper class:
height: calc(100% - 60px)
Or maybe you could change the structure of your page by something like:
<!DOCTYPE html>
<html>
<head>
<style>
* { margin: 0; padding: 0; }
#global { height: 100vh; }
#header { height: 60px; background-color: orange; }
#content { height: calc(100% - (60px + 50px)); background-color: gray; }
#footer { height: 50px; background-color: green; }
</style>
</head>
<body>
<div id="global">
<div id="header">
Aenean
</div>
<div id="content">
lacinia
</div>
<div id="footer">
quam
</div>
</div>
</body>
</html>
Remove the body {height:100%;} add some padding bottom on wrapper to compensate for the fixed footer height. Here is the fixed fiddle:
http://jsfiddle.net/0yz9nx35/9/
you can add overflow-y: hidden; do remove the scrollbar at the bottom.
If you want any scroll bar to be on the .content block, you can try the following.
You can make .content fixed such that the top and bottom edges are below the header and above the footer respectively.
In this approach, you may not need the .wrapper block element unless you need it for placing some background images, for example.
html, body {
height: 100%;
margin: 0px;
padding: 0px;
}
.wrapper {
height: 100%;
}
.header {
position: fixed;
top: 0px;
left: 0px;
height: 60px;
background-color: #333;
width: 100%;
}
.footer {
position: fixed;
bottom: 0px;
left: 0px;
height: 50px;
background-color: #333;
width: 100%;
}
.content {
position: fixed;
top: 60px;
bottom: 50px;
left: 0px;
background-color: beige;
width: 100%;
overflow: auto;
}
<div class="wrapper">
<div class="header"></div>
<div class="content">
Content goes here<br>
and<br>and<br>and<br>and<br>and<br>and<br>and<br>and<br>and<br>and<br>
the end.
</div>
<div class="footer"></div>
</div>
I feel like this should be much easier than I am making it...I'm looking for a solution to have 1 solid color extend from the left and end at a logo, then have a second solid color extend all the way to the right. I want the wrapper divs to extend 100%. So something like:
<div id="header-wrap"><!--100% page width-->
<div id="header"><!--1000px centered fixed width-->
<div id="logo"></div><!-- align left-->
<div id="nav"></div><!-- align right-->
</div>
<div id="sub-header-wrap">
...
</div>
</div>
Here's an image showing what I mean:
There is a lot that goes into this.
Let me start of with a link to a working fiddle: JSFiddle
How can I explain this?
Basically I have the two full-width divs that have the full background color. Inside those two divs I have a div classified as .inner that has 80% of the width (which can be whatever you want) that is aligned to the center with margins.
Inside .inner I have a left div and a right div of the proper sizes to contain the logo/navigation. Inside the left divs, I have another div, .shade that will darken the left side of the header.
The .left divs are relatively positioned and the .shade divs are absolutely positioned.
CSS:
body{
margin: 0;
}
header
{
display:block;
width: 100%;
}
header .top
{
background: #00a;
text-align: center;
color: white;
}
header .inner
{
width: 80%;
margin: 0 10%;
text-align: left;
}
header .inner .logo, header .inner .left
{
display: inline-block;
width: 20%;
margin: 0;
text-align: center;
height: 100%;
padding: 10px 0px;
position: relative;
z-index: 1;
}
header .inner .right
{
display: inline-block;
width: 78%;
margin: 0;
text-align: right;
}
header li
{
display: inline-block;
list-style: none;
}
header .bottom
{
background: #ca0;
}
header .shade
{
width: 1000%;
height: 100%;
position: absolute;
top: 0px;
right: 0px;
background: rgba(0, 0, 0, .3);
z-index: -1;
}
HTML:
<header>
<div class="top" align="center">
<div class="inner">
<div class="logo">
Logo
<div class="shade"></div>
</div>
<div class="right">
<li>Nav 1</li>
<li>Nav 2</li>
</div>
</div>
</div>
<div class="bottom">
<div class="inner">
<div class="left">
Subtext
<div class="shade"></div>
</div>
<div class="right">
<li>Link</li>
</div>
</div>
</div>
</header>
Full JSFiddle
If I understand you correctly, try something like this in a separate CSS file, or within a <style> block. It's not tested though, sorry.
#header {
margin: 0 auto; /* for centering */
width: 1000px;
}
#logo {
float: left;
width: 250px; /* for example */
background-color: red; /* for example */
}
#nav {
float: right;
width: 750px; /* for example */
background-color: blue; /* for example */
}
UPDATE:
If you can afford CSS3, this post can be intresting for you as well.
I'm trying to make a header for a site that has multiple background colors and images. On the left is a tan-ish gradient and a logo image, on the right is a sunburst/cloud image that fades to teal, as shown below.
The left (logo) portion should be 230px wide, and the right (sunburst) portion should be 770px wide, for a total of 1000px, and this should be centered. The left side tan gradient should extend to the left edge of the browser, and the teal should extend to the right edge.
I attempted to do it with percentages:
CSS:
#header {
height: 105px;
min-width: 1000px;
}
#header .left {
width: 31%;
background: url(../images/header_left_gradient.png) bottom left repeat-x;
height: 105px;
float: left;
}
#header .left #logo {
float: right;
width: 230px;
}
#header .right {
width: 69%;
background: url(../images/header-right.png) bottom left no-repeat #009eb0;
height: 105px;
float: left;
}
HTML:
<div id="header">
<div class="left">
<div id="logo">
<img src="./media/images/logo.png" alt="">
</div>
</div>
<div class="right">
Text
</div>
</div>
This almost worked, but the header didn't stay centered with wide browsers.
Fiddle
set header margin & width:
#header {
height: 105px;
margin: 0 auto;
min-width: 1000px;
width: 100%;
}
#header .left {
background: none repeat scroll 0 0 #FF00FF;
float: right;
height: 105px;
width: 31%;
}
#header .right {
background: url("../images/header-right.png") no-repeat scroll 0 0 #009EB0;
float: left;
height: 105px;
width: 69%;
}
this is worked for me.
A bit hacky, but this should do the trick:
body {
text-align: center;
}
#header {
display: inline-block;
height: 105px;
margin-left: auto;
margin-right: auto;
min-width: 1000px;
text-align: left;
}
you could use a wrapper div to apply the text-align to instead of the body, but I posted this in case you don't want to change the structure.
I ended up solving this in a bit of a hacky way. First, I added a container around the header like #Raad suggested, then added two more divs inside to hold my colors:
<div id="header-wrap">
<div id="filler-left">
</div>
<div id="filler-right">
</div>
<div id="header">
<div class="left">
<div id="logo">
<img src="./media/images/logo.png" alt="">
</div>
</div>
<div class="right">
Text
</div>
</div>
</div>
Then the CSS:
#header-wrap {
width: 100%;
position: relative;
}
#header-wrap #filler-left {
left: 0;
width: 50%;
position: absolute;
height: 105px;
background: url(../images/header_left_gradient.png) bottom left repeat-x;
}
#header-wrap #filler-right {
left: 50%;
width: 50%;
position: absolute;
height: 105px;
background: #009eb0;
}
#header {
height: 105px;
width: 1000px;
margin: 0 auto;
position: relative;
}
and set my .left and .right divs to fixed width. Worked out pretty well. Not my ideal solution, but it worked.
i have markup like this:
<html>
<body>
<div class="page">
<div class="top_menu">
some text
</div>
<div class='header'>
menu
</div>
<div class="main">
<div class="left_sidebar">
left
</div>
<div class="content">
left
</div>
<div class="right_sidebar">
right
</div>
</div><!-- main div -->
</div> <!-- page div -->
</body>
</html>
I need to set block .main to 100% page height, this is my css:
html {
height: 100%;
}
body {
height: 100%;
min-height: 100%;
margin: 0;
padding: 0;
}
.page {
height: 100%;
min-height: 100%;
background-color: white;
margin: 0 auto;
padding: 0;
width: 1084px;
}
.main {
width: 1084px;
height: 100%; // not working
}
.left_sidebar {
float: left;
max-width: 197px;
height: auto;
}
.content {
width: 517px;
float: left;
}
.right_sidebar {
width: 359px;
float: right;
}
Right now text inside .main shown beyond the block and in Chrome i can see that width of this block is 1084 but height is 0. I know maybe this issue has already been asked, but i think i missed something.
Searched over internet tried this solution, did not worked for me
Try using this http://jsfiddle.net/7cZMh/2/
HTML
<html>
<body>
<div class="page">
<div class="top_menu">
some text
</div>
<div class='header'>
menu
</div>
<div class="main">
<div class="left_sidebar">
left
</div>
<div class="content">
left
</div>
<div class="right_sidebar">
right
</div>
</div><!-- main div -->
</div> <!-- page div -->
</body>
</html>
CSS
html{
min-height: 100%;
position: relative;
}
body{
height: 100%;
overflow: hidden; // hide overflow
}
.page{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: maroon;
}
.main {
height: 100%;
background: black;
overflow: auto; // restore overflow
}
Oops, forgot this.
.left_sidebar {
float: left;
max-width: 197px;
height: auto;
}
.content {
width: 517px;
float: left;
}
.right_sidebar {
width: 359px;
float: right;
}
Use javascript to give height after on pageload
give id to div
<div class="page" id="myDiv">
....
</div>
And add this script before closing the body tag.
<script type="text/javascript">
document.getElementById("myDiv").style.height=screen.height;
</script>
Combining your HTML and Body tags into one and removing min-height seems to fix it:
html, body { height:100%; margin:0; padding:0; }
JSFiddle.
If you weren't wanting scrollbars you can use the CSS3 border-box property and mess around with margins and padding, like so: new JSFiddle. This should work in all modern browsers (nothing below IE8.0).