I have a site which looks good in quirks mode:
the navbar is always shown
the content has a minimum height
the content is streched when the page is enlarged: content height = document height - navbar height - footer height
Now, I'd like to change to the strict mode by adding <!DOCTYPE html>. I tried a lot of things but I didn't get the same behaviour. The content isn't streched anymore.
I've put the code in this fiddle: http://jsfiddle.net/5e1yvLxj/
In the fiddle the strict mode is activated.
index.html
<html lang="en">
<head>
<link href="main.css" rel="stylesheet"/>
</head>
<body>
<div id="nav">
</div>
<div id="messages">
<div id="chat-box">
</div>
</div>
<div id="footer">
</div>
</body>
main.css
html {
min-height: 100%;
position: relative;
}
body {
background-color: #004269;
margin-top: 112px; /* nav */
margin-bottom: 190px; /* footer */
}
#nav {
height: 100px;
position: absolute;
top: 0;
width: 100%;
background-color: #227733;
}
#messages {
position: relative;
margin: 0;
position: relative;
min-height: 200px;
padding: 10px;
background-color: white;
padding: 15px; }
#chat-box {
position: relative;
min-height: inherit;
padding-top: 0px;
height: 100%;
}
#footer {
padding-top: 20px;
background-color: #227733;
position: absolute;
bottom: 0;
width: 100%;
height: 150px;
}
Just use one of those sticky footer techniques:
document.getElementById("messages").onclick = function() {
var p = document.createElement("p");
p.innerHTML = "Lorem ipsum dolor sit amet, consectetur adipiscing elit.";
this.appendChild(p);
}
html, body {
margin: 0;
height: 100%;
}
#nav {
height: 100px;
background-color: #227733;
position: relative; /* force higher z-index than next divs */
}
#footer {
height: 150px;
background-color: #227733;
}
#messages {
min-height: 100%;
margin-top: -100px; /* match header height */
margin-bottom: -150px; /* match footer height */
background-color: #EEEEEE;
}
#messages:before {
content: "";
display: block;
height: 100px; /* match header height */
}
#messages:after {
content: "";
display: block;
height: 150px; /* match footer height */
}
<div id="nav">#nav</div>
<div id="messages">#messages (click to add content)</div>
<div id="footer">#footer</div>
You use too much position: relative and absolute. This can be useful in some cases but not here. Try the following for a change.
You can also use the calc to calculate the pixels using the percentage that the static nav and footer heights.
html {
height: 100%;
}
body {
background-color: #004269;
/* nav */
/* footer */
height: 100%;
}
#nav {
height: 100px;
width: 100%;
background-color: #227733;
margin-top:0px;
}
#messages
{
margin: 0;
background-color: white;
padding: 15px;
height: calc(100% - 100px - 150px);
overflow: hidden;
}
#chat-box {
min-height: inherit;
padding-top: 0px;
margin: 0;
background-color: white;
padding: 15px;
}
#footer {
padding-top: 20px;
background-color: #227733;
margin-bottom: 0px;
width: 100%;
height: 150px;
}
Here's a small JavaScript that'll do it without you're having to modify anything else you already have there:
window.onload = function() {
var nav = parseInt(document.defaultView.getComputedStyle(document.getElementById('nav'), null).height),
footer = parseInt(document.defaultView.getComputedStyle(document.getElementById('footer')).height);
document.getElementById('messages').setAttribute('style', 'height: ' + (window.innerHeight - nav - footer) + 'px;');
}
JSFiddle: http://jsfiddle.net/7kobcy8o/
I verified it working in IE11 and Chrome 39.
Related
I've been trying to set up the body of my website so that it's composed of three sections - a main section (for a slideshow/image), a mid-section (white background), and a footer (gray background). How would I go about doing this? So far, I have tried extending a tutorial for making a simple footer to allow me to add a third section. My HTML and CSS snippets are below:
index.html
<body bgcolor="#212121">
<div id="wrapper">
<div id="content">
<p>text</p>
</div>
</div>
<div id="midsection"><div id="mid-content">Mid</div></footer>
<footer id="footer"><div class="footer">Footer</div></footer>
</body>
styles.css
html, body {
margin: 0px;
padding: 0px;
min-height: 100%;
height: 100%;
}
#wrapper {
background-color: #212121;
min-height: 100%;
height: auto !important;
margin-bottom: -300px; /* the bottom margin is the negative value of the footer's total height */
}
#wrapper:after {
content: "";
display: block;
height: 300px; /* the footer's total height */
}
#content {
height: 100%;
}
#midsection {
height: 300px; /* the footer's total height */
margin-bottom: -100px;
}
#midsection:after {
content: "";
display: block;
height: 100px;
}
#mid-content {
background-color: #f9f9f9;
height: 284px; /* height + top/bottom paddding + top/bottom border must add up to footer height */
padding: 8px;
}
/* main image section (wrapper) + mid section */
#footer {
height: 100px;
}
#footer-content {
background-color: #808080;
}
Ideally, I'd like the midsection to be 300px, and the footer to be 100px.
How about this:
there were a bit of errors in the html. Remember to close html tags correctly. Hope this helps.
html:
<body>
<div id="wrapper">
<div id="content">
<p>text</p>
</div>
</div>
<div id="midsection">
<div id="mid-content">Mid</div>
</div>
<footer id="footer">
<div class="footer">Footer</div>
</footer>
</body>
css:
html, body {
margin: 0px;
padding: 0px;
min-height: 100%;
height: 100%;
background-color: #212121;
}
#wrapper {
min-height: 100%;
height: auto !important;
margin-bottom: -300px; /* the bottom margin is the negative value of the footer's total height */
}
#wrapper:after {
content: "";
display: block;
height: 300px; /* the footer's total height */
}
#content {
height: 100%;
}
#midsection {
background-color: white;
height: 300px; /* the footer's total height */
margin-bottom: -100px;
}
#midsection:after {
content: "";
display: block;
height: 100px;
}
#footer {
background-color: #212121;
height: 200px;
}
I need Help, as my html page is showing only half height in Mobile page view. in browser it looks ok but in mobile view only half a page is being displayed.
div.container {
width: 100%;
border: 1px solid gray;
}
a {
color: white;
text-decoration: none;
}
.adds {
position: relative;
overflow: hidden;
}
.fluidMedia {
position: relative;
padding-bottom: 56.25%; /* proportion value to aspect ratio 16:9 (9 / 16 = 0.5625 or 56.25%) */
padding-top: 30px;
height: 0;
overflow: hidden;
}
.fluidMedia iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
header, footer {
padding: 1em;
color: white;
background-color: black;
clear: left;
text-align: center;
color: white;
text-decoration: none;
}
sidebar {
margin-left: 0px;
padding: 1em;
overflow: hidden;
}
<div class="container">
<header>
<h1>Income Tax Act 1961</h1>
</header>
<sidebar>
<div class="fluidMedia">
<iframe src="http://www.incometaxact1961.com/Income_Tax/Sections/section2.html" frameborder="0"> </iframe>
</div>
</sidebar>
<footer>Copyright © <a href="http://www.incometaxact1961.com/" >Incometaxact1961.com</a></footer>
I just need post to display full in mobile and web page.
Any help code will be highly appreciated, I need to load a html page in another html page.
If the enough content does not reach the device's height,it will come like this, You can fix this by two ways.
Set a min-height for the sidebar or make the footer sticky to the bottom of the container.
Setting minimum height will vary for different devices.So you need a sticky footer for this case.It is possible in CSS3 using flex layout.Try the given code.
html,body{
height: 100%;
}
.container{
display: flex;
flex-direction: column;
height: 100%;
}
header{
flex: 0 0 auto;
}
sidebar{
flex: 1 0 auto;
}
footer{
flex:0 0 auto;
}
It will act as sticky footer whenever your content on the page cannot fits the device height.
What you could do is giving your footer position: absolute; to make it stick to the bottom, like so:
div.container {
width: 100%;
border: 1px solid gray;
}
a {
color: white;
text-decoration: none;
}
.adds {
position: relative;
overflow: hidden;
}
.fluidMedia {
position: relative;
padding-bottom: 56.25%; /* proportion value to aspect ratio 16:9 (9 / 16 = 0.5625 or 56.25%) */
padding-top: 30px;
height: 0;
overflow: hidden;
}
.fluidMedia iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
header, footer {
padding: 1em;
color: white;
background-color: black;
clear: left;
text-align: center;
color: white;
text-decoration: none;
}
sidebar {
margin-left: 0px;
padding: 1em;
overflow: hidden;
}
footer {
position: absolute;
width: 100%;
bottom: 0;
}
<div class="container">
<header>
<h1>Income Tax Act 1961</h1>
</header>
<sidebar>
<div class="fluidMedia">
<iframe src="http://www.incometaxact1961.com/Income_Tax/Sections/section2.html" frameborder="0"> </iframe>
</div>
</sidebar>
<footer>Copyright © <a href="http://www.incometaxact1961.com/" >Incometaxact1961.com</a></footer>
You can try setting initial scale of viewport to 1 by inserting this meta to html head
<meta name="viewport" content="width=device-width, initial-scale=1.0">
In order to fix your issue yo do not need to add any extra code or CSS properties. Instead, you have to delete a few, in particular, remove these:
.fluidMedia {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.fluidMedia iframe {
position: absolute;
top: 0;
left: 0;
}
Please, note that I said REMOVE these, not that your CSS should keep them. So this section of your CSS will look like:
.fluidMedia {
/* You can remove this, since it is empty. I added it for clarity purposes */
}
//This is what is left of the iframe CSS properties
.fluidMedia iframe {
width: 100%;
height: 100%;
}
I really hope this helps!
here is my code: http://jsfiddle.net/fxWg7/4041/
I want to make the left sidebar extend down to the footer dynamically. The footer is a sticky footer which means it will stay down there no matter how long the main content is.
I want the left sidebar to extend down to the footer no matter the height of the main content.
html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 50px;
/* bottom = footer height */
}
.container {
height: auto;
overflow: hidden;
}
.left {
width: 180px;
float: left;
background: #aafed6;
}
.right {
float: none;
/* not needed, just for clarification */
background: #e8f6fe;
/* the next props are meant to keep this block independent from the other floated one */
width: auto;
overflow: hidden;
}
footer {
width: 100%;
background-color: #000;
color: #fff;
padding: 1em;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
}
<div class="container">
<div class="left">
left content fixed width
<br>
<br> I want this to extend to footer!
</div>
<div class="right">
right content flexible width
<br>
<br> right content flexible width
<br>
<br> right content flexible width
<br>
<br> right content flexible width
<br>
<br> right content flexible width
</div>
</div>
<footer>
This is my footer.
</footer>
UPDATED:
The following css code will do it:
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
.container {
height: 100%;
display: flex;
flex: 1;
}
.left {
width: 180px;
background: #aafed6;
}
.right {
width: auto;
background: #e8f6fe;
}
footer {
width: 100%;
background-color: #000;
color: #fff;
padding: 1em;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
}
View jsfiddle - http://jsfiddle.net/jalenconner/be71229w/1/
This solution utilizes CSS Flexbox, which you can learn more about here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
html {
position: relative;
height: 100%;
}
body {
height: 100%
}
.container {
/* Full Height - height of footer*/
height: calc(100% - 50px);
display: flex;
flex-direction: row;
}
.left {
width: 20%;
float: left;
background: #aafed6;
height: 100%;
}
.right {
background: #e8f6fe;
width: 80%;
}
footer {
width: 100%;
background-color: #000;
color: #fff;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 50px;
}
.footer-text {
padding: 1em;
}
Just a little tweak to the body tag fixes it
*,
*:after,
*:before {
-moz-box-sizing:border-box;
box-sizing:border-box;
}
html {
position: relative;
height: 100%;
}
body {
height: 100%;
margin: 0;
}
.container {
height: inherit;
overflow: hidden;
}
.left {
width: 180px;
float: left;
background: #aafed6;
height: calc(100% - 50px);/**deduct heght of footer**/
}
.right {
float: none;
/* not needed, just for clarification */
background: #e8f6fe;
/* the next props are meant to keep this block independent from the other
floated one */
width: auto;
overflow: hidden;
}
footer {
width: 100%;
background-color: #000;
color: #fff;
padding: 1em;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
}
<body>
<div class="container">
<div class="left">
left content fixed width
<br>
<br> I want this to extend to footer!
</div>
<div class="right">
right content flexible width
<br>
<br> right content flexible width
<br>
<br> right content flexible width
<br>
<br> right content flexible width
<br>
<br> right content flexible width
</div>
</div>
<footer>
This is my footer.
</footer>
</body>
html {
position: relative;
}
body {
margin-bottom: 40px;
}
html, body {
height: 100%;
}
.container {
overflow: auto;
display: flex;
min-height: 100%;
}
.left {
width: 180px;
background: #aafed6;
}
.right {
background: #e8f6fe;
width: auto;
overflow: hidden;
}
footer {
width: 100%;
background-color: #000;
color: #fff;
position: fixed;
left: 0;
bottom: 0;
width: 100%;
height: 40px;
}
Use above CSS code, you will get desired output with fixed footer and content with 100% height.
My simple layout contains header, main section and footer. Footer pushed to bottom of a page. And I want main section to take all the space between header and footer. Here is what I've done: http://jsfiddle.net/5d3m9/
HTML
<div class="wrap">
<header>header</header>
<div class="main">lorem2000 </div>
<div class="clear"></div>
<footer>#Copyright</footer>
</div>
CSS
html, body {
height: 100%;
}
body {
margin: 0;
}
header {
height: 150px;
background: orange;
}
.wrap {
min-height: 100%;
position: relative;
overflow: hidden;
}
.main {
background: #00eaea;
padding-bottom: 32767px;
margin-bottom: -32767px;
}
.clear {
height: 50px;
}
footer {
background: #dadada;
height: 50px;
width: 100%;
position: absolute;
bottom: 0;
}
Is there any other/better way to achieve this? (without padding-bottom: 32767px; margin-bottom: -32767px;)
Apply the following style to .main
.main {
background: #00eaea;
top: 150px;
bottom: 50px;
position:absolute;
width: 100%;
}
http://jsfiddle.net/5d3m9/1/
I'd like to have my header fixed: header is always at the top of page and my whole content (everything including footer) could be scrolled. Header is 60 px high as you can see below and it's not the problem to make it fixed at the top.
The problem I want to solve (using only CSS) is to have scrollbar starting below these 60 pixels from the top.
As you can see, the bottom of the scrollbar (2. arrow) is actually hidden/moved down. I guess by my problematic 60px.
So it goes like this:
HTML:
<!DOCTYPE html>
<head>
...
</head>
<body>
<header>
...
</header>
<div id="content">
...
</div>
</body>
</html>
CSS:
html, body {
height: 100%;
}
body {
background: #d0d0d0;
overflow-y: hidden;
}
header {
background: #fff;
height: 60px;
width: 100%;
position: fixed;
top: 0;
}
#content {
margin-top: 60px;
height: 100%;
width: 100%;
overflow-y: scroll;
}
What am I missing in my CSS?
Thanks guys.
// Edit as a reply to the forst answer here (to John Grey)
Commentary below your comment:
Here is a jsfiddle how to solve your problem:
http://jsfiddle.net/sTSFJ/2/
Here is the css:
html, body {
height: 100%;
margin: 0px;
padding: 0px;
}
#wrapper {
width: 100%;
height: 100%;
margin: auto;
position: relative;
}
#header {
height: 40px;
background-color: blue;
color: #fff;
}
#content {
position:absolute;
bottom:0px;
top: 40px;
width:100%;
overflow: scroll;
background-color: #fff;
color: #666;
}
Your #content height is equal body height, but you have a header so... Try use this:
html, body {
height: 100%;
}
body {
background: #d0d0d0;
overflow-y: hidden;
}
header {
background: #fff;
height: 5%;
width: 100%;
position: fixed;
top: 0;
}
#content {
margin-top: 5%;
height: 95%;
width: 100%;
overflow-y: scroll;
}
You can solve this using the calc property. That is instead of height 95%, since you don't know if 5% == 60px rather do the following:-
#content {
margin-top: 5%;
height: calc(100%-60px);
height: -webkit-calc(100%-60px); /*For webkit browsers eg safari*/
height: -moz-cal(100%-60px); /*for firefox*/
width: 100%;
overflow-y: scroll;
}