Here's my page: http://bad-sf.com/stemtest/about.html
Notice that scrolling is still an option even though the content is small enough to not require scrolling. Could it have to do with my css? (below):
body:before {
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;
}
* {
margin:0;
padding:0;
outline: none;
}
html, body {
height:100%;
font-family: '_.regular';
font-size: 13px;
outline: none;
}
#wrap {
min-height:100%;
width:800px;
margin: 2% auto;
}
#main {
overflow:auto;
padding-bottom: 30px;
}
#smm {
width: 400px;
height: 200px;
float:left;
}
#footer {
position: relative;
margin-top: 0px;
height: 35px;
clear:both;
font-family: '_.regular';
}
THANKS! I'm still learning html and css so any input you have would be really appreciated - Danny
This is caused by #wrap, being 104% height. Note these rules:
body {
height: 100%;
}
#wrap {
min-height: 100%;
margin: 2% auto;
}
So your #wrap is actually 100% height plus 2% margin on top plus 2% margin on bottom.
There are several ways of countering this.
You can remove the height from body and optionally min-height from #wrap, as it's no use anymore in this case.
You can change margin on #wrap to margin: 0 auto; (this will inevitably raise the content though).
There are probably a few other possibilities, but seeing as the unsatisfactory answers are voted down, I don't really feel compelled towards thinking about more sublime solutions.
Take away height:100%; from html, body { }. Why did you need it there even anyway?
The reason why the scrollbar is always appearing is because the #wrap DIV is also set to 100% height and on top of that, a margin of 2%. This forces your body to be 2% more than 100%.
You can remove the 2% margin from #wrap but if you don't want do, removing the height: 100%; from html, body { } should do the trick.
Related
I am using the responsive blog theme and having a tough time centering my site logo. This is what my site-logo in style.css looks like (according to inspect element):
#header img {
margin: 0 0.75em 0 1em;
display: block;
float: right;
margin-left: auto;
margin-right: auto;
height: auto;
max-width: 100%;
}
#header #site-logo {
margin-left: -82.5%;
height: 100px;
padding: 2.5em 0;
}
I tried changing the margins, text aligns and floats of these two divs, but none helped. I don't know, if I have to look into any other ID or class on the style.css.
If you know the width of the logo just use margin:0 auto; http://jsfiddle.net/NVLtM/
#header #site-logo {
display:block;
width:200px;
margin:0 auto;
}
If you don't know the width, make the image an inline-block element and use text-align:center on the parent element http://jsfiddle.net/NVLtM/1/.
#header {
text-align:center;
}
#header #site-logo {
display:inline-block;
}
remove the float, remove existing margins, no need for width;
margin: 0 auto will center the element
I've searched around the forums but can't get an exact answer to the question. I want to tweak my blog layout at http://techtites.com/ to make the content area flexible width that adjusts when the browser changes width without pushing the sidebar to the bottom.
It is currently a fixed width layout.
Main styles that I've been playing with are:
#wrapper {
width:960px;
margin:0 auto;
}
#content {
padding:25px 0;
}
section {
float:left;
width:660px;
margin-right:20px;
}
aside {
float:left;
width:280px;
}
I want to make the section width to be dynamic, while retaining the aside to sit at the right of the window.
use positioning. set your #wrapper div to position: relative; this will position all child elements of that div relative to it rather than the browser window.
now position your aside to the top left of your #wrapper div
aside {
width: 280px;
position: absolute;
right: 0;
top: 0;
}
and finally, give enough padding to the section div so that it can still expand and contract, but it leaves enough room for the aside. You want the padding to equal the width of the aside (in this case 280px).
section {
padding-right: 280px;
}
I put up an example of all of this on jsFiddle: jsfiddle.net/2e9HM/6/
BONUS: if you really want to get fancy, you can set the max-width of your #wrapper div so that the page is flexible within that size. If you do this, make sure you set a min-width as well (equal to the size of your aside) so that the aside doesn't fall outside of the #wrapper when the window is shrunk down all the way.
Morphius solution is the best so far - for an example, see
http://codepen.io/anon/pen/wBBdgg
.blbx {
background:blue;
width: calc(100% - 100px);
height:50px;
display:inline-block;
vertical-align:top;
text-align:center;
}
.rdbx {
background:red;
display:inline-block;
height:50px;
width: 100px;
vertical-align:top;
}
.surround {
width: 100%;
height:50px;
}
.myimg { max-width:100%;
max-height:100%;
}
<div class='surround'>
<div class="blbx" ><img class='myimg' src="http://assets.cdpn.io/assets/logos/codepen-logo.svg">
</div><div class="rdbx"></div></div>
Change your styles to this
section {
float:left;
width:100%;
margin-right: -280px;
}
aside {
float:left;
width:280px;
}
Live example
Maybe this would do:
section {
float:left;
width:100%;
padding-right:250px;
height:100px;
}
aside {
float: left;
width: 250px;
min-height: 100%;
}
section {
float:left;
width:660px;
margin-right:20px;
height:100px;
}
aside {
height:100px;
margin-left: 670px;
}
live demo
I know there are a lot of questions about a css 100% height problem.
However I've tried to follow the instructions there and still the height isn't 100%,
so I thought I'd ask the question again.
The site where you can see the problem is:
www.exendo.be
some css styles:
html {
height: auto !important;
margin: 0;
min-height: 100%;
padding: 0;
}
body {
background: url("/wp-content/uploads/2011/06/bg.png") repeat-x scroll 0 100px #F2F7E8;
height: auto !important;
margin: 0;
min-height: 100%;
padding: 0;
width: 100%;
}
wrapper {
height: auto !important;
min-height: 100%;
position: relative;
}
footer-container {
background: url("/wp-content/uploads/2011/06/exendo-footer_bg.png") no-repeat scroll center bottom #557F40;
height:146px;
}
As you can see on the site, the footer is too high on the page.
If I inspect the page with Firebug, I can see that the html is 100% height, but the body tag isn't.
The problem both occurs on Firefox and IE.
If anybody could help that would be great!
A number of people suggested position:absolute; bottom:0;
This can cause an issue if the content is taller than the container. The height will not increase so the content will no longer fit and can get cut off or result in ugly scroll bars.
If you can give a fixed height to the container, this is ideal since the height:100% will then work on the child element. In case the content is too large, you can put a background on the child with overflow:visible on the parent, so the content still displays. This helps, but it can still break unless the child is the same width as the parent.
If that doesn't work, I recommend using min-height in em or pixels. This will make sure the height fills the parent, and expands if the content is too long. This worked best for customer comments on www.baka.ca
I think this article can help you.
According to this article:
Assign "position:relative" to your "container" div - page, page-container, or wrapper (I'm not sure to which one of the three, just try), and then "position:absolute; bottom:0;" to your "footer-container" div.
I hope that helps you.
#denappel; give html & body 100% height put footer outside of your main div wrapper & give margin-bottom in minus according to the height of footer.
css:
.wrapper {
position: relative;
width: 700px;
font-size: 0.9em;
margin: 0 auto -142px;
background:yellow;
}
.header {
height: 190px;
background:green;
}
.footer {
position: relative;
width: 700px;
margin: 0 auto;
background:red;
}
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -142px;
.footer, .push {
height: 142px;
}
check this example
http://jsfiddle.net/sandeep/tCdPX/3/
this functionally called stickyfooter
Same issue as before (see Sticky Footer, but only sometimes and Sticky Footer, but only sometimes...continued)...
I have a footer that I want to stick to the bottom of the page unless content fills the page, then I want it to get pushed down. I've done this a dozen times with other sites, but I can't get this one to work. Working in Wordpress. I've checked the order of my divs and I've gone over the css...any help is appreciated.
The main css components:
* {
margin: 0;
padding: 0;
}
html, body {
height:100%;
min-height:100%;
}
#wrapper {
background:url("images/shadowborder.png") repeat-y center;
width:100%;
max-width:100%;
min-width:980px;
min-height:100%!important;
margin:0 auto;
margin-bottom:-20px;
position:relative;
overflow:auto;
}
#content {
clear:both;
float:left;
padding:20px 20px 60px 20px;
font-size: 1.6em
}
#spacer {
height: 40px;
clear: both;
}
#footer {
position: relative;
border-top: 1px solid #e5a5fc;
padding:3px!important;
height:20px;
}
The site:
http://www.hcfmissoula.com
The recipe I use is:
height: 100% on html
min-height: 100% and position: relative on body (with height:100% for ie6)
position: absolute and bottom: 0 on the footer div
Maybe be tricky preventing footer from obscuring some text near the bottom though.
I usually have my structure laid out something like this:
<div id="all">
<div id="page">
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
</div>
Where the body will hold a background pattern, "all" will hold a dropshadow for the page going up and down, and "page" may often have a repeating-y background as well.
I have tried variations on using the css height/min-height properties:
html, body {
height:100%;
...
}
#all {
height:100%;
min-height:100%;
}
#page {
height:100%;
min-height:100%;
height:auto !important;
}
It seems like if I remove height:auto from "all" then it seems like it works UNTIL you scroll, then after the scroll the background for all dissappears
example
However if I keep the height:auto there then I get the problem of the background for page not working
example
Hopefully someone knows a fix?
Well, here's what I ended up with for the CSS:
html, body {
height:100%; /* IE6: treaded as min-height*/
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
color: #494949;
text-align: center;
background-color: #3f91a7;
background-image: url(images/bg_body.jpg);
background-repeat: repeat-x;
background-position: center top;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
#all {
margin: 0px;
padding: 0px;
height:100%; /* IE6: treaded as min-height*/
min-height:100%; /* real browsers */
height:auto !important;
background-image: url(images/bg_all.png);
background-repeat: repeat-y;
background-position: center top;
overflow: hidden;
}
#page {
width: 993px;
padding: 0 0 10000px;
margin-top: 0px;
margin-right: auto;
margin-bottom: -10000px;
margin-left: auto;
text-align: left;
background-color: #FFF;
background-image: url(images/bg_page.jpg);
background-position: center top;
background-repeat: repeat-y;
height:100%; /* IE6: treaded as min-height*/
min-height:100%; /* real browsers */
height:auto !important;
}
#header, #footer {
text-align: center;
font-size: 16px;
padding: 20px;
}
#content {
padding: 25px;
}
I haven't had a chance to test it in anything other than Firefox, but, hoipefully it will give you a good start.
I would just flip the location of your div#all and div#page...
<div id="page">
<div id="all">
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
</div>
Although the question was posted some years ago, I ran into the same challenge and found this earlier thread today. Although I reckon there might be more fine solutions by now, I wanted to share the one I found today nevertheless.
Had the same problem, background 1 full screen, adaptive and fully below everything else and another repeating(-y) background number 2 should go on top, but not scroll out of sight because it was set to follow the height of the window which was given to the particular div which holds background 2.
Let's start with the divs I created:
<div id="full_background">
<img src="images/bkg_main.jpg" alt="" />
<div id="absolute">Contains background set to repeat-y</div>
<div id="content">Contains the content</div>
</div>
the css looks like this:
* { margin: 0px; padding: 0px; }
html { height: 100%; }
body { height: 100%; }
#full_background { width: 100%; min-height: 100%; position: relative; float: left; }
#full_background>img { position: absolute; top: 0; left: 0; position: fixed; width: 100%; z-index: 1; display: block; }
#full_background>div { position: relative; z-index: 2; }
#absolute { position: fixed !important; left: 0; width: 100%; height: 100%; background: url("../images/bkg2.png") top left repeat-y; }
#content { width: 290px; margin-left: 20px; padding: 30px; line-height: 1.7em; font-family: 'Lato', sans-serif; position: relative; float: left; }
First off, I added a full screen & resizing background image to my site (using the div full_background and the img tag) using the following solution (very easy css solution which works like a charm in every browser and most older versions down to for example IE7) - http://www.webdeveloper.com/forum/archive/index.php/t-256494.html > see last answer by aj_nsc
Next, using the following jQuery method - http://nicholasbarger.com/2011/08/04/jquery-makes-100-height-so-much-easier/ - I created a div with id = absolute, which is given the same height as the browser window (also on resizing). I placed my repeating(-y) background number 2 in here. Set this div to position:fixed and it will stay put when the div with the content is being scrolled through.
Then below this div you put the div with your content, which freely expands downwards beyond the browser window.
Upon scrolling, the two backgrounds will keep filling the full area of the browser window (vertically as well) at all times and stay put, with the content scrolling up and down over them.
This way, upon resizing, you also make sure that both backgrounds keep filling the full background area at all times.
I tested this solution in CH, FF, IE7-9 and Safari and it worked in all of them without any problems whatsoever.
Here's what's happening: You've set html & body to have a height of 100%, but that 100% is the height of the viewport, not the document. Since #all's height is set to 100%, it is set to 100% of the parent's height, which happens to be body, which is set at 100% of the height of the viewport. Everything's inheriting the height of the viewport.
The way to fix this problem is actually the same way you would fix clearing floats that have an outer container. All you have to do is put overflow:auto; on #all. You don't even need any height declarations on any other elements, and you may be able to eliminate either the #all or the #page div.
More info here: http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/
Have you tried:
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
#all {
min-height: 100%;
}
? Only for IE 6, you should set height: 100%; for #all (because it interprets that basically as min-height (as a result of a bug). As IE6 doesn't understand the min-height attribute, height effectively becomes a replacement for min-height).
If you set height: 100%; for other browsers, they will take it as 100% height of the viewport, not 100% of the page, so scrolling won't work correctly.
My comment on the downvote:
It has become clear, that my answer doesn't solve the whole problem. What we have here, seems to be quite a complex case - at least no one here seems to have found an answer yet? I've even looked into Ingo Chao's excellent (German) book, which comes to the same conclusion: Setting the parent's height won't work, and setting the child's height won't work, if the parent's height wasn't set explicitly, but rather dynamically by the size of the content.
But my answer could still help to restrict the possibilities a little bit - because setting height on #all will most likely not work on any browser except IE 6. If you disagree, please post a comment, because in that case, I'd also like to learn more about this.
This worked for me:
#page {
width: 993px;
padding: 0px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
text-align: left;
background-color: #FFF;
background-image: url(http://jeffkilroy.com/hosted/layout1/images/bg_page.jpg);
background-position: center top;
background-repeat: repeat-y;
/* height:100%; IE6: treaded as min-height*/
height: expression(document.body.offsetHeight); /* sets min-height for IE */
overflow: auto;
min-height:100%; /* real browsers */
/* height:auto !important; */
}
Forget 100% on the divs, try moving your background image to the html element and the full height border to the body.
html {
height:100%;
background-color: blue;
}
body {
margin: auto auto;
padding: 0;
color: #494949;
/*min-height: 100%; */
height:100%; /*for ie6*/
border-left:solid 2px red;
border-right:solid 2px red;
background-color:#fff;
width: 960px;
}
Have you tried this :
function getWindowHeight() {
var windowHeight = 0;
if (typeof(window.innerHeight) == 'number') {
windowHeight = window.innerHeight;
}
else {
if (document.documentElement && document.documentElement.clientHeight) {
windowHeight = document.documentElement.clientHeight;
}
else {
if (document.body && document.body.clientHeight) {
windowHeight = document.body.clientHeight;
}
}
}
return windowHeight;
}
window.onload = init;
function init(){
document.getElementByID("all").style.height = getWindowHeight() + "px";
}
Or put page instead of all