I'm trying to get navigation bar of height 40px on the top which I've now, Also I position:fixed; the only problem is, everything what I put inside the divs he showing up to the right and not at the center which I want, the navigation bar need to be 100%
JS Fiddle
this is my .css code:
.container{
height:auto;
margin-top:-10px;
margin-left:-7px;
}
/*========================= TOP HEADER =========================*/
.banner{
margin: 0pt auto;
width:100%;
background-color:#d9d8d6;
border-style:solid;
border-width:1px;
border-color:#000000;
position:fixed;
position: absolute;
}
.banner-container{
height:40px;
background-image:url('http://i.imgur.com/WoVWvmy.png');
background-size:40px 30px;
background-repeat:no-repeat;
position:center;
text-align:center;
}
These divs I use in index.php
<div class="container">
<div class="banner">
<div class="banner-container">
</div> <!-- END BANNER-CONTAINER -->
</div> <!-- END BANNER -->
</div> <!-- END CONTAINER -->
I restructured a little bit. Please see: JS Fiddle
HTML
<div class="banner">
<div class="banner-container"></div>
<!-- END BANNER-CONTAINER -->
</div>
<!-- END BANNER -->
CSS
body {
margin: 0;
}
/*========================= TOP HEADER =========================*/
.banner {
margin: 0pt auto;
width:100%;
background-color:#d9d8d6;
border-style:solid;
border-width:1px;
border-color:#000000;
position:fixed;
}
Here's your best bet.
Note I changed the HTML to use an img tag. It's easier to center these, and to manage them in general, than to do the same with CSS backgrounds:
<div class="container">
<div class="banner">
<img src="http://i.imgur.com/WoVWvmy.png" class="banner-container" />
</div> <!-- END BANNER -->
</div> <!-- END CONTAINER -->
CSS:
.container{
height:auto;
}
/*========================= TOP HEADER =========================*/
.banner{
width:100%;
background-color:#d9d8d6;
border-style:solid;
border-width:1px;
border-color:#000000;
text-align: center;
}
I'm building a 1 column responsive blog site.
I have a fixed position header with navigation, content section with x amount of blog posts (as excerpts) and a footer containing a contact form.
<div id="header">Navigation & Branding</div>
<div id="content">Blog Content</div>
<div id="footer">Contact Form</div>
Everything is working as required apart from the height of the footer.
I would like to make the footer height match the height of the browser window, so that (apart from the fixed header) when you scroll to the bottom of the page the only the footer is visible and fills the browser window entirely.
How do I achieve this with css?
You can do this by setting the #footer as position:absolute; then setting both the width & height to 100%.
As long as your footer div is a direct descendant of the body, and the body has the margin and padding set to 0, setting the height of your footer to 100% should do.
This example should demonstrate:
<html>
<head><title>title</title><head>
<body style="margin:0; padding:0;">
<div id="header" style="height: 300px; background-color: blue;">Navigation & Branding</div>
<div id="content" style="height: 500px; background-color: red;">Blog Content</div>
<div id="footer" style="height:100%; background-color: yellow;">Contact Form</div>
</body>
</html>
you want some thing like this ??
HTML:
<div id="mainbody">
<div id="header">Navigation & Branding</div>
<div id="content">Blog Content</div>
<div id="footer">Contact Form</div>
</div>
CSS:
html, body{
width:100%;
height:100%;
}
#header{
position:fixed;
top:0;
height:50px;
width:100%;
background:red;
color:white;
}
#mainbody{
padding-top:50px;
background:blue;
color:white;
width:100%;
}
#footer{
background:green;
position:absolute;
height:100%;
width:100%;
color:white;
}
DEMO
My page ...
http://webpages.charter.net/jolove/Escort_Folder/test.html
thanks to: fortysevenmedia.com/blog/archives/making_your_footer_stay_put_with_css
Now I have a functional footer that adheres to the bottom of the window ..
except now what I need to do is get the footer to stick to the bottom with the height of the scrollable area above the footer shrinking or expanding accordingly as the window height changes.
In other words, the window's vertical scroll bar should never appear.
John
If correctly understand what you're trying to do it can be done using divs with percentage heights. Here is the basic idea:
<div id="header" style="height: 10%"></div>
<div id="scrollableContent" style="height: 60%; overflow: auto"></div>
<div id="footer" style="height: 30%"></div>
Using the percentage heights each div will resize according to the window size and only the scrollableContent div will have a scroll bar.
i am not sure if you wish the following just try it. on the #poemScroller change the height:28em; to height:auto;
you can use static positioning to achieve the same behavior see this example
<html>
<head>
<style>
#header{
position:fixed;
top:0;
height:50px;
z-index:5;
width:100%;
}
#content{
/* margin top should be >= header height
this also applies for footer */
margin: 50px 0;
width:100%;
}
#footer{
position:fixed;
bottom:0;
height:50px;
z-index:5;
width:100%;
}
</style>
</head>
<body>
<div id="header" > <h1>This is header</h1> </div>
<div id="content" >
<p>alot of content</p>
</div>
<div id="footer" > <h1>This is footer</h1> </div>
</body>
</html>
I have a navigation bar on the left hand side of my page, and I want it to stretch to 100% of the page height. Not just the height of the viewport, but including the areas hidden until you scroll. I don't want to use javascript to accomplish this.
Can it be done in HTML/CSS?
Here is the solution I finally came up with when using a div as a container for a dynamic background.
Remove the z-index for non-background uses.
Remove left or right for a full height column.
Remove top or bottom for a full width row.
EDIT 1: CSS below has been edited because it did not show correctly in FF and Chrome. moved position:relative to be on the HTML and set the body to height:100% instead of min-height:100%.
EDIT 2: Added extra comments to CSS. Added some more instructions above.
The CSS:
html{
min-height:100%;/* make sure it is at least as tall as the viewport */
position:relative;
}
body{
height:100%; /* force the BODY element to match the height of the HTML element */
}
#cloud-container{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
overflow:hidden;
z-index:-1; /* Remove this line if it's not going to be a background! */
}
The html:
<!doctype html>
<html>
<body>
<div id="cloud-container"></div>
</body>
</html>
Why?
html{min-height:100%;position:relative;}
Without this the cloud-container DIV is removed from the HTML's layout context. position: relative ensures that the DIV remains inside the HTML box when it is drawn so that bottom:0 refers to the bottom of the HTML box. You can also use height:100% on the cloud-container as it now refers to the height of the HTML tag and not the viewport.
With HTML5, the easiest way is simply to do height: 100vh. Where 'vh' stands for viewport height of the browser window. Responsive to resizing of browser and mobile devices.
I had a similar problem and the solution was to do this:
#cloud-container{
position:absolute;
top:0;
bottom:0;
}
I wanted a page-centered div with height 100% of page height, so my total solution was:
#cloud-container{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
width: XXXpx; /*otherwise div defaults to page width*/
margin: 0 auto; /*horizontally centers div*/
}
You might need to make a parent element (or simply 'body') have position: relative;
You can cheat using Faux Columns
Or you can use some CSS trickery
Use position absolute. Note that this isn't how we are generally used to using position absolute which requires manually laying things out or having floating dialogs. This will automatically stretch when you resize the window or the content. I believe that this requires standards mode but will work in IE6 and above.
Just replace the div with id 'thecontent' with your content (the specified height there is just for illustration, you don't have to specify a height on the actual content.
<div style="position: relative; width: 100%;">
<div style="position: absolute; left: 0px; right: 33%; bottom: 0px; top: 0px; background-color: blue; width: 33%;" id="navbar">nav bar</div>
<div style="position: relative; left: 33%; width: 66%; background-color: yellow;" id="content">
<div style="height: 10000px;" id="thecontent"></div>
</div>
</div>
The way that this works is that the outer div acts as a reference point for the nav bar. The outer div is stretched out by the content of the 'content' div. The nav bar uses absolute positioning to stretch itself out to the height of its parent. For the horizontal alignment we make the content div offset itself by the same width of the navbar.
This is made much easier with CSS3 flex box model, but that's not available in IE yet and has some of it's own quirks.
I ran into the same problem as you. I wanted to make a DIV as background, why, because its easy to manipulate div through javascript. Anyways three things I did in the css for that div.
CSS:
{
position:absolute;
display:block;
height:100%;
width:100%;
top:0px;
left:0px;
z-index:-1;
}
It's simple using a table:
<html>
<head>
<title>100% Height test</title>
</head>
<body>
<table style="float: left; height: 100%; width: 200px; border: 1px solid red">
<tbody>
<tr>
<td>Nav area</td>
</tr>
</tbody>
</table>
<div style="border: 1px solid green;">Content blabla... text
<br /> text
<br /> text
<br /> text
<br />
</div>
</body>
</html>
When DIV was introduced, people were so afraid of tables that the poor DIV became the metaphorical hammer.
I want to cover the whole web page before prompting a modal popup. I tried many methods using CSS and Javascript but none of them help until I figure out the following solution. It works for me, I hope it helps you too.
<!DOCTYPE html>
<html>
<head>
<style>
html, body {
margin: 0px 0px;
height 100%;
}
div.full-page {
position: fixed;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
background-color: #000;
opacity:0.8;
overflow-y: hidden;
overflow-x: hidden;
}
div.full-page div.avoid-content-highlight {
position: relative;
width: 100%;
height: 100%;
}
div.modal-popup {
position: fixed;
top: 20%;
bottom: 20%;
left: 30%;
right: 30%;
background-color: #FFF;
border: 1px solid #000;
}
</style>
<script>
// Polling for the sake of my intern tests
var interval = setInterval(function() {
if(document.readyState === 'complete') {
clearInterval(interval);
isReady();
}
}, 1000);
function isReady() {
document.getElementById('btn1').disabled = false;
document.getElementById('btn2').disabled = false;
// disable scrolling
document.getElementsByTagName('body')[0].style.overflow = 'hidden';
}
function promptModalPopup() {
document.getElementById("div1").style.visibility = 'visible';
document.getElementById("div2").style.visibility = 'visible';
// disable scrolling
document.getElementsByTagName('body')[0].style.overflow = 'hidden';
}
function closeModalPopup() {
document.getElementById("div2").style.visibility = 'hidden';
document.getElementById("div1").style.visibility = 'hidden';
// enable scrolling
document.getElementsByTagName('body')[0].style.overflow = 'scroll';
}
</script>
</head>
<body id="body">
<div id="div1" class="full-page">
<div class="avoid-content-highlight">
</div>
</div>
<button id="btn1" onclick="promptModalPopup()" disabled>Prompt Modal Popup</button>
<div id="demo">
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
</div>
<div id="div2" class="modal-popup">
I am on top of all other containers
<button id="btn2" onclick="closeModalPopup()" disabled>Close</button>
<div>
</body>
</html>
Good luck ;-)
* {
margin: 0;
}
html, body {
height: 90%;
}
.content {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto ;
}
If you are targeting more modern browsers, life can be very simple.
try:
.elem{
height: 100vh;
}
if you need it at 50% of the page, replace 100 with 50.
document.body.onload = function () {
var textcontrol = document.getElementById("page");
textcontrol.style.height = (window.innerHeight) + 'px';
}
<html>
<head><title></title></head>
<body>
<div id="page" style="background:green;">
</div>
</body>
</html>
This is how you can make your side nav as tall as the page content, without having to change the body to be flex or table.
Don't set html or body to height 100%, because that will make it only as tall as the browser viewport, and the page will be overflowing that, and your nav will only be as tall as the viewport.
Just set your nav to height:100% position:absolute with the html tag position:relative.
The reason this works is because height 100% only works if its container is fixed height, with the exception (for some reason) the html tag.
<html style='position:relative'>
<body style='margin:0'>
<div style='height:100%; position:absolute; top:0; background:linear-gradient(to bottom,red,green); border:2px solid blue'>
nav
</div>
<div style='font-size:99px;padding:33px'>
I want my side div to be as tall as the page content.<br />
I want my side div to be as tall as the page content.<br />
I want my side div to be as tall as the page content.<br />
I want my side div to be as tall as the page content.<br />
I want my side div to be as tall as the page content.<br />
I want my side div to be as tall as the page content.<br />
I want my side div to be as tall as the page content.<br />
I want my side div to be as tall as the page content.<br />
I want my side div to be as tall as the page content.<br />
I want my side div to be as tall as the page content.<br />
I want my side div to be as tall as the page content.<br />
</div>
</body>
</html>
This code works but not fully supports:
height: 100svmax;
Browsers support
Edit
Sorry, old answer is not correct..
i have tried all viewport units
but the only solution work using javascript here
Simple, just wrap it up in a table div...
The HTML:
<div class="fake-table">
<div class="left-side">
some text
</div>
<div class="right-side">
My Navigation or something
</div>
</div>
The CSS:
<style>
.fake-table{display:table;width:100%;height:100%;}
.left-size{width:30%;height:100%;}
.left-size{width:70%;height:100%;}
</style>
I succeeded with
min-height: 100vh
for both, the menu and content div.
Duplicate of this question.
I've got an existing site (jacquelinewhite.co.uk), on it there is a footer. Currently this footer always sits underneath the main content. I'm trying to make it float to the bottom of the browser window, or if the content is bigger than the window, stay at the bottom of the content.
Effectively the HTML is structured like this:
<div id="container">
<div id="top_bar">
</div>
<div id="header">
</div>
<div id="left_menu">
</div>
<div id="right_content">
</div>
<div class="clear">
</div>
<!-- FOOTER AREA -->
<div id="footer">
</div>
<!-- END FOOTER AREA -->
</div>
I have tried absolute position, bottom 0, which puts the footer at the bottom of the window, but if the content of the window is bigger then the footer covers the content.
How should I fix this?
This one's always worked well for me: CSS Sticky Footer
Test drive this...
body {
margin:0;
padding:0;
z-index:0;
}
#toolbar {
background:#ddd;
border-top:solid 1px #666;
bottom:0;
height:15px;
padding:5px;
position:fixed;
width:100%;
z-index:1000;
}
Assuming you are using footer() element I found just adding this to CSS worked for me
html, body {
height: 100%;
}
body {
display: flex;
flex-direction: column;
}
footer {
margin-top: auto;
}