I am trying to work on a new project using Twitter's Bootstrap framework, but I am having an issue. I want a full body background, yet the background seems to be limited to the height of the container div. here is the HTML/CSS code:
<!doctype html>
<html lang="en">
<head>
<meta charset='UTF-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.3.0/bootstrap.min.css">
<title>Bootstrap Issue</title>
<style>
body { background: black; }
.container { background: white; }
</style>
</head>
<body>
<div class="container">
<h1> Hello, World!</h1>
</div>
</body>
</html>
How can I get the body to take up the entire screen?
You need to either add this:
html { background: transparent }
Or, set the "page background" (background: black) on html instead, which is fine to do.
Why? Inside Bootstrap, there's this:
html,body{background-color:#ffffff;}
(bear in mind the default background value is transparent)
For more information on why this matters, see: What is the difference between applying css rules to html compared to body?
Note that this is no longer an issue with Bootstrap 3+.
Set the height of html and body to be 100% in the CSS.
html, body { height: 100%; }
Then it should work. The problem is that the height of body is automatically calculated to be the height of the contents, rather than the height of the whole screen.
/* here is a pure CSS solution */
<style type="text/css">
html, body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
#full-screen-background-image {
z-index: -999;
min-height: 100%;
min-width: 1024px;
width: 100%;
height: auto;
position: fixed;
top: 0;
left: 0;
}
#wrapper {
position: relative;
width: 800px;
min-height: 400px;
margin: 100px auto;
color: #333;
}
a:link, a:visited, a:hover {
color: #333;
font-style: italic;
}
a.to-top:link,
a.to-top:visited,
a.to-top:hover {
margin-top: 1000px;
display: block;
font-weight: bold;
padding-bottom: 30px;
font-size: 30px;
}
</style>
<body>
<img src="/background.jpg" id="full-screen-background-image" />
<div id="wrapper">
<p>Content goes here...</p>
</div>
</body>
<style>
body { background: url(background.png); }
.container { background: ; }
</style>
this works for a background image if you want it
best solution would be
.content{
background-color:red;
height: 100%;
min-height: 100vh;
}
its automatically take veiwport height(vh) in bootstrap.
Related
I am trying to create a sticky footer but I'm getting empty space above and below my header & footer.
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
header {
background-color: orange;
position: relative;
height: 400px;
width: 100%;
color: white;
text-align: left;
}
footer {
background-color: #202020;
color: white;
position: absolute;
width: 100%;
height: 60px;
bottom: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Porfolio</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<header>
<h1>header</h1>
<p>header</p>
</header>
<div class="wrapper">
content
</div>
<footer>
footer
</footer>
</body>
</html>
What is the best way to create a sticky footer?
Can anyone explain why I've got this space appearing above header & below footer when I have content (h1 p) in in my header section.
For the header gap, your h1 and p tags have a default padding and margin, you may want to remove them or reduce them to your liking
h1, p {
padding: 0;
margin: 0;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
h1,p {
padding: 0;
margin: 0;
}
header {
background-color: orange;
position: relative;
height: 400px;
width: 100%;
color: white;
text-align: left;
}
footer {
background-color: #202020;
color: white;
position: absolute;
width: 100%;
height: 60px;
bottom: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Porfolio</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<header>
<h1>header</h1>
<p>header</p>
</header>
<div class="wrapper">
content
</div>
<footer>
footer
</footer>
</body>
</html>
A "sticky" div can be achieved using position: fixed; in your footer CSS. Fixed means that the on-screen position will never change. Or rather you should follow the instructions posted there.
Concerning the space, it is probably because of the default styles applied to h1. Use a debugger to see those default styles and override them with your custom css.
Firefox and Chrome have built in debuggers that also let you view styles and are very efficient for debugging. Usually right click > "inspect element" then go for the CSS tab which lets your select and see styles applied to elements.
In your example, you are not "resetting" the h1 and p tags. By default these elements have some extra margin.
Try adding the following code to your css.
h1, p {
margin: 0;
}
Also check out the HTML5 CSS Sticky Footer.
you may use flex prperties
.wrapper may scroll, header & footer are sticky
/* demo purpose */
.wrapper:hover:before {
content:'test';
display:block;
height:1000px;
}
/* end demo purpose*/
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
body {
display:flex;
flex-flow:column;
}
header {
background-color: orange;
position: relative;
width: 100%;
color: white;
text-align: left;
}
footer {
background-color: #202020;
color: white;
width: 100%;
height: 60px;
bottom: 0;
}
.wrapper {
flex:1;
overflow:auto;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Porfolio</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<header>
<h1>header</h1>
<p>header</p>
</header>
<div class="wrapper">
content
</div>
<footer>
footer
</footer>
</body>
</html>
or just footer is sticky ?, needs an extra imbrication
/* demo purpose */
.wrapper:hover:before {
content:'test';
display:block;
height:1000px;
}
/* end demo purpose*/html,
body {
height: 100%;
margin: 0;
padding: 0;
}
body, main {
display: flex;
flex-flow: column;
}
header {
background-color: orange;
position: relative;
color: white;
text-align: left;
}
footer {
background-color: #202020;
color: white;
height: 60px;
bottom: 0;
}
.wrapper, main {
flex: 1;
}
main {
overflow: auto;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Porfolio</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<main>
<header>
<h1>header</h1>
<p>header</p>
</header>
<div class="wrapper">
content
</div>
</main>
<footer>
footer
</footer>
</body>
</html>
footer {
background-color: #202020;
color: white;
//replace absolute with fixed for sticky footer (as in, it sticks at the bottom.)
position: fixed;
width: 100%;
height: 60px;
bottom: 0;
}
I saw this comment you posted on another answer:
If desktop only, then I would go with fixed positioning; however, iOS has problems rendering fixed positioning at times. – SergeantHacker
Try removing height 100% from body and html.
I know that my question was addressed many time on this site. However, I can't seem to find my answer. I'm trying to create a sticky footer on my pages.My pages are divided in 3 div.
top
middle
bottom
I've created a layout.css file. Here it is:
html,body {
margin: 0;
font-family: Tahoma, Geneva, sans-serif;
font-size: 14px;
height: 100%;
margin: 0 auto;
position:relative;
}
#pageTop {
height: 90px;
}
#pageMiddle {
min-height: 100%;
margin-bottom: -50px;
}
#pageMiddle:after {
content: "";
display: block;
}
#pageBottom, #pageMiddle:after {
height: 50px;
}
I don't understand how to remove the pageTop height from the pageMiddle min-height. This seems to be the issue.
Thanks for your help on this matter.
Hi all and thanks for giving me some pointers. After a few days, I finally got the answer.
Like mentioned above, I had 3 div:
top
middle
bottom
I was trying to apply a sticky footer on my bottom div. without any success.
Here is how I managed to solve this issue.
I inserted the top and middle div in a wrapper div. Having only 2 main divs on my page.
It looks like this now.
Wrapper
top
Middle
bottom
here is the css:
#wrapper{
min-height: 100%;
margin-bottom: -50px;
}
#top {
width:1000px;
margin:0 auto;
height: 90px;
}
#middle {
width:1000px;
margin:0 auto;
}
#wrapper:after {
content: "";
display: block;
}
#bottom, #wrapper:after {
width:1000px;
height: 50px;
margin:0 auto;
}
Here is my html template:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My title</title>
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="style/style.css">
</head>
<body>
<div id="wrapper">
<div id="top">Header</div>
<div id="middle">Content</div>
<div id="bottom">Footer</div>
</body>
</html>
It is very simple but it works.
Again thanks for your replies.
I am designing a text field which I want to be appear vertically-middle of a div. I want the black color div to be show vertically center of the blue (id=srch) div.
HTML & CSS:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
* {
vertical-align:baseline;
font-weight: inherit;
font-family: inherit;
font-style: inherit;
font-size: 100%;
border:0 none;
outline:0;
padding:0;
margin:0;
}
html {
height:100%;
}
#outerwrapper {
width: 90%;
height: 100%;
min-height: 100%;
height: auto !important;
border: solid thin #333;
}
body {
height: 100%;
width: 100%;
}
#header {
height: 80px;
width: 100%;
background-color:#999;
}
input {
border:solid thin #ab1;
}
#srch{
height:50px;
background-color:#00f;
}
#srch div{
margin: auto 0 auto 0;
width: 200px;
background-color: #000;
}
#contentWrapper {
width: 100%;
overflow: auto;
background-color:#0F0
}
</style>
</head>
<body>
<div id="outerwrapper">
<div id="header">Header
<div id="srch">
<div>
<input type="tel" name="aa"/>
</div>
</div>
</div>
<div id="contentWrapper">
Content Wrapper
</div>
</div>
</body>
</html>
My approach: I give the black div top and bottom margin auto but it is not working (also for the horizontal center [left and right margin:auto] it is working). Does margin:auto only work for left and right?
I want to know why this is happening, and I don't want any other solution like:
Display text inline with a vertical-align div.
Display with proper padding or margin.
margin: auto does not work for top and bottom. If margin-top: auto or margin-bottom: auto is specified, their used value is 0. Here's an article about how you can achieve vertical centering.
You need to use some jQuery here to calculate the height of parent container.
Demo - http://jsfiddle.net/tQBVy/
I have some problem about css layout.
I wrote the code like below:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
</head>
<style>
html { height:100%; margin: 0px; padding: 0px; }
body {
height: 100%;
padding: 0px;
margin: 0px;
font-family: Verdana, helvetica, arial, sans-serif;
font-size: 68.75%;
background: #fff;
color: #333;
}
#header {
position: absolute;
width:100%;
background: #c0c0c0;
height: 100px;
}
#wrapper {
height: 100%;
width: 100%;
}
#content {
position: relative;
margin-left: 370px;
background: #ffdab9;
height: 100%;
}
#sidebar {
position: absolute;
background: #eee8aa;
width: 370px;
height: 100%;
}
</style>
<body>
<div id="header">header</div>
<div id="wrapper">
<div id="sidebar">sidebar</div>
<div id="content">content</div>
</div>
</body>
</html>
then, the thing what I want to do is
"header"'s height is 100 pixel.
"sidebar(left side)"'s width id 370 pixel.
"content(right side)"'s width is relative.
When I control the browser smaller, I do not want browser to make "scroll bar".
like http://maps.google.com. google maps never make scroll bar when any resizing browser.
num.4 is most important that I told.
If the goal is made it, my code can be fixed all. Please give me any help.
I think you need two css changes (also see my jsfiddle):
add overflow: hidden to body
body {
...
overflow: hidden;
}
change position to relative in #header:
#header {
position: relative;
...
}
=== UPDATE ===
There are (at least) three possible solutions, but none is perfect:
1.) Your example site from google calculates the (content) height at the beginning and after each resize with javascript.
Negative: not css only, you need a script.
2.) Add the height of the header (here 100px) to the css bottom definition of all elements in the sidebar and content (see demo2).
Negative: if the header height changes, you have to update all bottom definitions too.
#words {
bottom: 102px;
...
}
3.) Use the css function calc for the #wrapper to calculate the real height (see demo3).
Negative: at the moment it works only with firefox4 (and above) and IE9.
#wrapper {
...
height: calc(100% - 100px);
height: -moz-calc(100% - 100px);
}
I have the following code:
<!doctype html>
<html lang="en">
<head>
<title>Test</title>
<style type="text/css">
*
{
margin: 0;
padding: 0;
}
div#container
{
position: relative;
top: 100px;
left: 100px;
width: 640px;
height: 480px;
background: #ff0000;
}
textarea
{
position: absolute;
top: 20px;
left: 20px;
right: 20px;
bottom: 20px;
}
</style>
</head>
<body>
<div id="container">
<textarea></textarea>
</div>
</body>
</html>
If you test this in any other browser than IE you will see a red box and a textarea that fills the entire area with a 20px padding around it. However in IE (all versions) it will just show a tiny textarea.
The reason I am doing it this way is because I will be using the same effect for a popup that fills the screen and therefore the size is unknown which is why I just specify the position rather than using width and height.
How do I fix this to get it working in IE? jquery perhaps?
Just to confirm using width:100%;height:100%; will not work in this instance
The problem is that <textarea> is a replaced element and has an intrinsic width and there are rules - CSS2.1:10.3.8 - that govern what the eventual width will be. Ironically, Webkit is at fault here and Gecko is doing it right.
Using this CSS will make it work in Firefox3+, Safari and Opera and IE8+ which is unfortunate as you want it working from IE6 upwards.
IE6 and IE7 at least render the <textarea> at the correct width, so it is just the height that is incorrect. I strongly suggest that IE6/7 be left in this state since the <textarea> is usable. Progressive enhancement here allows modern browsers to render the box in a more accessible way but old browsers are still usable. Failing that, a quick, simple JavaScript function could be used to to set the height for IE6/7 if it must look the same in all browsers.
div#container {
position:relative;
top:100px;
left:100px;
width:600px;
height:440px;
background: #ff0000;
padding:20px;
}
textarea {
position:relative;
width:100%;
height:100%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
Reference articles used for this answer
Absolutely positioned textareas
Firefox / IE textarea sizing quirk - workarounds?
there you go (you need to "play" with the textarea width percentage) you can hide the scrollbar with overflow:hidden;
<!doctype html>
<html lang="en">
<head>
<title>Test</title>
<style type="text/css">
*
{
margin: 0;
padding: 0;
}
div#container
{
position: relative;
top: 100px;
left: 100px;
width: 640px;
height: 480px;
background: #ff0000;
}
textarea
{
position: absolute;
top: 20px;
left: 20px;
right: 20px;
bottom: 20px;
width:93%;
height:92%;
}
</style>
</head>
<body>
<div id="container">
<textarea></textarea>
</div>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<title>Test</title>
<style type="text/css">
*
{
margin: 0;
padding: 0;
}
div#container
{
position: relative;
top: 100px;
left: 100px;
width: 640px;
height: 480px;
background: #ff0000;
}
.box
{
position: absolute;
top: 20px;
left: 20px;
right: 20px;
bottom: 20px;
}
textarea
{
overflow-y: scroll;
width:100%;
height:100%;
}
</style>
</head>
<body>
<div id="container">
<div class="box">
<textarea></textarea>
</div>
</div>
</body>
</html>