The design of my site (using Bootstrap) is when the user has scrolled to the bottom, the fixed header touches the link in the footer. On small screens it works fine. Like so -
But on a larger screen resolution (1024x768 upwards), the header stops before it reaches the footer. Like so -
I know that the html and body have to have a defined height so added this -
html, body {
height:100%;
}
but didn't work.
I also tried giving the footer a height -
#bottom{
border-top: none;
font-family: Calibri, san-serif;
letter-spacing:2px;
text-transform:uppercase;
color:#000!important;
font-size: 20px;
}
.botwid{
min-height: 500px;
padding-top: 35px;
width: 100%;
margin: 0 555px;
but that didn't work either.
Here is my site.
Thanks
Seems like margin-bottom of the footer needs to be a (screenHeight - titleHeight). Try setting this property using javascript (as it would change whenever the window size changes).
Using JQuery, this could be done using
.resize() call.
Related
I'm trying to get a simple page layout where the navbar sits vertically along the right side of the user's window, taking up no more than 20% of the available space. The remaining 80% of space to the left is used for content.
I want the entire page to be resizable, so no matter how big or small the browser window is (within reason), the content will resize to the user's screen. Everything works and resizes great, but there's one problem with the navBar. Here's a CSS excerpt:
body{
background-color: #111111;
font-family: Roboto;
color: #cccccc;
font-weight: 300;
font-size: 14pt;
height: 100%;
}
#content{
width: 80%;
float: left;
}
#navBar{
width: 20%;
height: 100%;
background-color: #00C9FF;
float: left;
position: absolute;
}
#welcome{
background-color: #222222;
text-align: center;
margin: 1%;
}
The Problem:
If I leave the code above as is, the navBar renders on the right side of the screen, as it should, but it is not 100% the height of the browser window. Note it still resizes when the browser window's WIDTH is changed.
If I set navBar's position to absolute (position: absolute) the navbar renders exactly how it should render, except it floats to the left side of the browser, basically making it on the complete opposite side of where it should be.
Demo: http://codepen.io/anon/pen/YPyvzO (remove position: absolute to see where the navBar SHOULD render)
I have tried several different things including setting "HTML" in CSS to height: 100% and several different position properties for navbar, all to no avail. I'd like for this to be done only in CSS, but I'm not sure if it's possible.
Add the following:
position: absolute;
right: 0;
to #navBar. One thing that took me a long time to understand is that position: absolute overrides everything, even floats.
when you resize the browser the width and height change, so for this purpose you have to use media query in CSS and in this you have to tell the browser that in this width the navbar should be in given width. and another option is that you can use bootstrap, in bootstrap you not write too much css. and all the work become easy.
I want to implement a "center frame" like a narrow and tall page in the center of my webpage.
And I want to make sure it has 200 pixels of space both in left and right. The following css rule works for left, but right is nearly on the right of body.
div#centerframe
{
background:rgba(255, 255, 255, 0.85);
box-shadow:0em 0.5em 2em 0.3em;
margin-left: 200px;
margin-top: 200px; /* top works too */
margin-right: 200px;
float:left; /* because I want it to expand with its content */
padding-top: 90px;
padding-bottom: 90px;
padding-left: 90px;
padding-right: 90px;
}
I made a fiddle to show you the bad behaviour, but it behaves as I want in this fiddle :
http://jsfiddle.net/UMscz/
however, with the same dom, it doesn't work on my site.
the body rule is like this :
body
{
position:relative;
width:100%;
height:100%;
padding:0;
margin:0;
overflow:auto;
}
and my dom is like
<body>
<div id='centerframe'>
<div id='article_wrapper'>
</div>
</div>
</body>
So how can I make sure that '#centerframe' has a certain pixels of space in right and left ?
The reason I'm trying to do is I want to show fixed size ads on the page.
Thanks !
Edit :
And I'm sure that nothing in the content "pushes" it to stretch. I don't set any width rules in the content so that it resizes according to centerframe and its padding.
Edit 2:
I spotted the problem. But it is still strange. I had some elements that pushes its width, in index.php (inline style). But when I click to a link, and go to show_article.php, the width of the centerframe remains as in the index.php.
So when I removed the width rule in index.php, it also fixed the width in show_article.php, even though the width rule was only in index.php.
So, does the css rule remain when going to another page? It shouldn't, right ?
this will work :
div#centerframe
{
background:rgba(255, 255, 255, 0.85);
box-shadow:0em 0.5em 2em 0.3em;
margin-left: 200px;
margin-top: 200px; /* top works too */
margin-right: 200px;
padding-top: 90px;
padding-bottom: 90px;
padding-left: 90px;
padding-right: 90px;
max-width:100%;
}
(remove float left and add max-width)
you can also wrap your center div with 2 fixed size div.
I guess you're using a Framework like drupal or Joomla.
View source of show_article.php from your browser (ctrl+u), that must contain index.php header with your css rules
I have a div that I want to fill the whole height of the body less a set number in pixels. But I can't get height: calc(100% - 50px) to work.
The reason I want to do this is I have elements that have dynamic heights based on some varying criteria, e.g. height of the header changes based on different elements it can contain. A content div then needs to stretch to fill the rest of the available space available.
The div element, however, stays the height of the content - it doesn't seem as if it interprets 100% to be the height of the body element.
body {
background: blue;
height: 100%;
}
header {
background: red;
height: 20px;
width: 100%;
}
h1 {
font-size: 1.2em;
margin: 0;
padding: 0;
height: 30px;
font-weight: bold;
background: yellow;
}
#theCalcDiv {
background: green;
height: calc(100% - (20px + 30px));
display: block;
}
<header>Some nav stuff here</header>
<h1>This is the heading</h1>
<div id="theCalcDiv">This blocks needs to have a CSS calc() height of 100% - the height of the other elements.</div>
I would appreciate any help or pointers in the right direction.
You need to ensure the html and body are set to 100% and also be sure to add vendor prefixes for calc, so -moz-calc, -webkit-calc.
Following CSS works:
html,body {
background: blue;
height:100%;
padding:0;
margin:0;
}
header {
background: red;
height: 20px;
width:100%
}
h1 {
font-size:1.2em;
margin:0;
padding:0;
height: 30px;
font-weight: bold;
background:yellow
}
#theCalcDiv {
background:green;
height: -moz-calc(100% - (20px + 30px));
height: -webkit-calc(100% - (20px + 30px));
height: calc(100% - (20px + 30px));
display:block
}
I also set your margin/padding to 0 on html and body, otherwise there would be a scrollbar when this is added on.
Here's an updated fiddle
http://jsfiddle.net/UF3mb/10/
Browser support is:
IE9+, Firefox 16+ and with vendor prefix Firefox 4+, Chrome 19+, Safari 6+
I was searching why % doesn't seem to work. So, I tested out using 100vh instead of just setting it at 100% it seems that 100vh works really well across almost all browsers/devices.
example: you want to only display the top div to the user before it scrolls, like a hero banner module. But, at the top of the page is a navbar which is 68px in height. The following doesn't work for me at all doing just %
height: calc(100% - 68px);
There's was no change. The page just stayed the same. However, when swapping this to "vh" instead it works great! The div block you assign it too will stay on the viewer's device hight only. Until they decide to scroll down the page.
height: calc(100vh - 68px);
Change the +/- to include how big your header is on the top.
If your navbar is say 120px in height then change 68px to 120px.
Hope this helps anyone who cannot get this working with using normal height: calc();
First off - check with Firebug(or what ever your preference is) whether the css property is being interpreted by the browser. Sometimes the tool used will give you the problem right there, so no more hunting.
Second off - check compatibility: http://caniuse.com/#feat=calc
And third - I ran into some problems a few hours ago and just resolved it. It's the smallest thing but it kept me busy for 30 minutes.
Here's how my CSS looked
#someElement {
height:calc(100%-100px);
height:-moz-calc(100%-100px);
height:-webkit-calc(100%-100px);
}
Looks right doesn't it?
WRONG
Here's how it should look:
#someElement {
height:calc(100% - 100px);
height:-moz-calc(100% - 100px);
height:-webkit-calc(100% - 100px);
}
Looks the same right?
Notice the spaces!!!
Checked android browser, Firefox for android, Chrome for android, Chrome and Firefox for Windows and Internet Explorer 11. All of them ignored the CSS if there were no spaces.
Hope this helps someone.
try setting both html and body to height 100%;
html, body {background: blue; height:100%;}
All the parent elements in the hierarchy should have height 100%. Just give max-height:100% to the element and max-height:calc(100% - 90px) to the immediate parent element.
It worked for me on IE also.
html,
body {
height: 100%
}
parent-element {
max-height: calc(100% - 90px);
}
element {
height:100%;
}
The Rendering in IE fails due to failure of Calc when the window is resized or data loaded in DOM. But this method mentioned above worked for me even in IE.
You don't need to calculate anything, and probably shouldn't:
<!DOCTYPE html>
<head>
<style type="text/css">
body {background: blue; height:100%;}
header {background: red; height: 20px; width:100%}
h1 {font-size:1.2em; margin:0; padding:0;
height: 30px; font-weight: bold; background:yellow}
.theCalcDiv {background-color:green; padding-bottom: 100%}
</style>
</head>
<body>
<header>Some nav stuff here</header>
<h1>This is the heading</h1>
<div class="theCalcDiv">This blocks needs to have a CSS calc() height of 100% - the height of the other elements.
</div>
I stuck it all together for brevity.
If you are styling calc in a GWT project, its parser might not parse calc for you as it did not for me... the solution is to wrap it in a css literal like this:
height: literal("-moz-calc(100% - (20px + 30px))");
height: literal("-webkit-calc(100% - (20px + 30px))");
height: literal("calc(100% - (20px + 30px))");
I have padding to the right of my archives and search page and I believe it has to do with my body element, however I'm not quite sure what is different on these pages are from the other pages on the site of which are all fine for style wise as they all use the same format. It's a wordpress website. As I said, it's only happening to this page and the search page and all others are fine, so I'm confused as to what it's doing.
html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; background: url(img/BG.jpg) repeat; min-width:1024px; }
body { margin: 0px; padding 0px; font-size: 13px; line-height: 1.231; background: url(img/NAV-bg.jpg) top repeat-x;}
header { width: 960px; height: auto; margin: 0 auto; display: block;}
#container { width: 960px; margin: 20px auto; padding: 0 1.5em;}
aside { width: 260px; height: auto; float: left; position: relative;}
#main { width: 650px; height: auto; float: right; position: relative;}
#footer { width: 100%; min-width:1024px; display: block; height: 503px; background: url(img/FOOTER-bg.jpg) repeat-x; background-color: #821d20; position: relative; top: 100px; }
If you decrease the size of your window you'll notice that a scroll bar on the bottom of the page shows up and then the padding on the right starts to take shape. If you make your window larger that padding space is then gone and the scroll bar on the bottom disappears. Have I restricted my body tag in any way to have this happen?
I've looked through this one but I already have a min-width defined.
Website has strange whitespace on right side of the page when the browser is resized to a smaller window
In your style.css file at Line 108, remove the width attribute from the header tag to fix your horizontal scrollbar issue.
Fixed CSS:
header { height: auto; margin: 0 auto; display: block;}
For review, 3D View in Firefox browser shows the header as the gray bar with is the root of your problem. The other styles that create the text are not affected.
Tip: Right mouse-click the above image and view in new tab to see in original size.
Ah, if I'm understanding your problem correctly, it appears that the tag header, specifically its style width: 960px, is what is causing this peculiar occurrence. The containing div around the header, #main, only has width: 650px. As a result, the excess width of the header causes it to extend beyond the edge of the div.
The reason why it seems to be appearing as padding only at smaller screen widths is because the containing div around all that, #container, is centered by its margins - so the effects of the over-wide header won't become apparent until the browser is thin enough such that its right edge begins to overlap the right side of the header.
Rather than fixing this by just dropping the width: 960px from the styles of the header (which may mess up the site where this width for header tags is actually needed), I would suggest adding an overriding class to all offending tags, perhaps on the lines of .archive-header { width: auto; }. But I guess the solution is up to you, since you probably know the site better than I do.
I hope this helps! (I really do, otherwise you'd have read all this for nothing! Sorry if you did...) For the future, try downloading Firebug for Mozilla Firefox, which has a handy element inspector which will let you play around with the styles of elements to see what works. It should help you spot these kinds of issues on your own, so you can fix them quicker.
I am currently working on a project in which the navigation bar is floated to the left and then the content is on the right of that, also floated so it is flush up against the navigation content. I currently have the first page fine and floats perfectly, but when I try to float the next page's content, it jumps down and will not float at all. Both are in separate div's and on separate html documents and both have same float attributes. I do not understand why if both have the same exact code and have enough room for floating, why can't the second page's content do the same?? I am and must use one stylesheet for all pages.
CSS for body
body {
width: 980px;
margin-left: 8%;
margin-right: 8%;
margin-top:2%;
padding: 0;
font-family: "gill sans", sans-serif;
font-size: .8 em;
background-color: #CCC;
}
CSS for navigation
#containernav {
float: left;
padding: 0;
width: 120px;}
CSS for page 1 and 2
#content_main, #content_main2 {
padding:0;
margin:0;
width:750px;
float:left;
background-color:#A30000; }
My guess would be the content inside the floated div on page 2 is larger then 750px, thus causing its parent to stretch, and the div to be pushed down.