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).
Related
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
Here's a simplified version of my homepage:
<div class="main">
<div class="content"> all the content of my website </div>
<div class="nav"> fixed on the screen and always visible </div>
</div>
And here's the corresponding css:
.main {
max-width: 500px;
height: 2000px;
margin: auto;
background-color: grey;
}
.nav {
width: 100px;
height: 100px;
background-color: blue;
position:fixed;
right: 0; /* that's the issue */
}
I'd like the fixed element to stay within it's parent (touching the right edge of its parent). But right now it's touching the right border of the screen.
Any idea how to fix this? Thanks!
You can add an extra item to simulate the properties of the main container, try this:
.main {
max-width: 500px;
height: 2000px;
margin: auto;
background-color: grey;
}
.nav {
position:fixed;
max-width:500px;
width:100%;
}
.nav > div{
width: 100px;
height: 100px;
background-color: blue;
float:right;
}
<div class="main">
<div class="content">all the content of my website</div>
<div class="nav"><div>fixed on the screen and always visible</div></div>
</div>
position: fixed is described as, "The element is positioned relative to the browser window". You can use Javascript to accomplish this effect, here is how you do it with jQuery, for example:
$(window).scroll(function() {
var y = $(window).scrollTop();
$(".nav").css('top', y);
});
.main {
max-width: 500px;
height: 4000px;
margin: auto;
background-color: grey;
position: relative;
}
.nav {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
right: 0; /* that's the issue */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
<div class="content"> parent </div>
<div class="nav"> fixed to parent width </div>
</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 have this page layout and am trying to make it occupy 100% of the height by expanding the content area and leaving the footer visible at the bottom of the page.
But for some reason the content area is not expanding. Do you know what I need to change in the code?
<body>
<form id="form1" runat="server">
<div>
<div class="main">
<div class="header">
This is the header
</div>
<div class="content">
This is the content
</div>
<div class="footer">
This is the footer
</div>
</div>
</div>
</form>
</body>
And here is the css
html, form
{
height: 100%;
}
body
{
padding: 0px;
margin: 0px;
background-image: url('../back.jpg');
height: 100%;
}
.main
{
margin: 0px auto;
width: 100%;
height: 100%;
}
.header
{
float: left;
width: 100%;
background-color: Yellow;
height: 80px;
}
.content
{
width: 960px;
margin: 0 auto;
background-color: Gray;
height: auto;
min-height: 100%;
}
.footer
{
width: 960px;
background-color: Green;
margin: 0px auto;
height: 50px;
}
Thanks
You need to remove the extra div that has no class specified. Since that div has no height specified, the 100% height you are setting in the div with class main will not work.
<body>
<form id="form1" runat="server">
<div class="main">
<div class="header">
This is the header
</div>
<div class="content">
This is the content
</div>
<div class="footer">
This is the footer
</div>
</div>
</form>
</body>
UPDATE
Okay so fixing your issue with the footer not "sticking" to the bottom of the page, I modified part of your css.
.content
{
width: 960px;
margin: 0 auto;
background-color: Gray;
padding-bottom: 50px;
min-height: 90%;
}
.footer
{
position: fixed;
bottom: 0;
left: 50%;
width: 960px;
margin-left: -480px;
height: 50px;
background-color: Green;
}
.content
padding-bottom: 50px; This is so extra content does not overflow into the space occupied by the footer.
.footer
position: fixed; We need this to force the positioning of the footer.
bottom: 0; This will force the footer to the bottom of the page.
left: 50%; Puts the left side of the footer div in the middle of the page.
margin-left: -480px; Move the div left of half of the width of the footer so it is now centered on the page.
Example 1: http://jsfiddle.net/nG9sm/
Example 2, lots of text: http://jsfiddle.net/9Up5F/
Your code has extra div with no class just remove it, it will fix the issue.
Updated fiddle
Update your .footer CSS:
.footer
{
width: 960px;
background-color: Green;
margin: 0px auto;
height: 50px;
position: absolute;
bottom: 0;
}
or
.footer
{
width: 960px;
background-color: Green;
margin: 0px auto;
height: 50px;
position: fixed;
bottom: 0;
}
Help Link
Make footer stick to bottom of page correctly
I have a problem with HTML.
The #content div wont get the width.
div test is centered, and #menu should have 15% width and #info to.
I tried clear: both; but it wont work...
Maybe its a issue to width 100%.
<!doctype html>
<html>
<head>
<style>
html, body {
height: 100%;
}
body {
margin: 0px;
overflow: hidden;
}
#wrapper {
background-color: green;
width: 100%;
height: 100%;
position: fixed;
}
#upper {
height: 15%;
background-color: blue;
}
#test {
height: 85%;
width: 100%;
margin: 0px auto;
}
#test #menu {
width: 15%;
height: 100%;
float: left;
/* scroll bar */
overflow-y: scroll;
overflow-x: hidden;
background-color: red;
}
#test #content {
width: 70%;
height: 100%;
float: left;
}
#test #content {
width: 15%;
height: 100%;
float: left;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="upper">
upper
<!-- logo etc -->
</div>
<div id="test">
<div id="menu">
menu
</div>
<div id="content">
content
</div>
<div id="info">
info
</div>
</div>
</div>
</body>
</html>
Could somebody help me!
The problem is that you are overwriting your declarations:
#test #content {
width: 70%;
height: 100%;
float: left;
}
#test #content {
width: 15%;
height: 100%;
float: left;
}
I would recommend the Use of inline-block on the element instead of floating.
although it has is own faults..
http://jsfiddle.net/avrahamcool/gMMHL/1/
Auto margins don't work with percentages. You'll have to give it a fixed dimension in order for the margin centering to work.