I have a webpage which has a large amount of unused space at the bottom of the body which I am unable to get rid of.
The body content is not filling 100% of the outer body.
I have tried most things in an attempt to fix this but nothing works - these include setting html, body to height: 100% and body to min-height: 100%.
I've also made the body content to 100% but the content will not fill the body. Hopefully someone can help!
html, body{
margin: 0;
padding: 0;
height: 100%;
}
html {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
body {
background-color: #3BB9C5;
position: absolute;
min-height: 100%;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
body, html{
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
body{
background: #3BB9C5;
}
div{
height: 100%;
}
<div>sample text</div>
This should help
Remove the position: absolute from html. If possible, remove the whole:
html {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
This happens to me all the time when using chrome browser. Even if I have tried to edit the code on my editor and try to refresh the page it seems to be not working. But if you clear the cache of the browser and reload the page it will magically apply the change on the code.
Funny thing is that I just recently figure out how to disable cache on chrome.
So if just press F12 and will open the Developer tools on the chrome and go to the Network Tab and check the Disable Cache
You should try to put in your CSS:
body {
margin: 0px;
padding: 0px;
}
or in your html
<body style="margin:0px; padding:0px;"></body>
This could do the trick.
Related
I have the following setup:
HTML
<div>
<img src="https://placehold.it/300x300" />
</div>
CSS
div
{
position: absolute;
top: 0;
right: 0;
height: 100%;
}
img
{
height: 100%;
}
When I load the page it renders correctly. However, if I adjust the height of the browser, the left side of the image remains in place while the image expands outside (or shrinks inside) of the viewport.
If I refresh the page then it immediately redraws correctly. The issue appears to be present in all browsers.
I found the following question but not sure if the issue is quite the same. The non-JS solutions didn't work; I didn't attempt any of the JS suggestions.
Does anyone why this might be happening and know of a fix (using CSS) to make the div/image redraw when I resize the browser?
Its because the browser doesnt redraw the div as it does not know it suppose to be 100% wide.
Try this setup:
div
{
position: absolute;
top: 0;
right: 0;
height: 100%;
width:100%;
}
img
{
height: 100%;
position: absolute;
top: 0;
right: 0;
}
Check out this fiddle: https://jsfiddle.net/ash06229/z55827t9/
div
{
position: absolute;
top: 0;
left: 0;
height: 100vh;
width: 100%;
}
img
{
max-height: 100%;
max-width: 100%;
}
so I'm coding my site and I need the DIV to fill the height of the page completely
However when someone zooms out, it goes like this:
http://imgur.com/0hqWl0d
I was wondering if there was a fix to this? I know I can use height: 100% or something but I prefer to keep it on auto as it makes the site responsive.
http://hastebin.com/ikoyefumif.xml < If you need part of the code, here it is. Thanks.
Whilst min-height: 100vh works in some cases, it does not in all.
Have a go at using this:
#parent {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
I advise you play around with the directional values depending on what you wish, and you may have to alter the value too.
Here's a demonstation: https://jsfiddle.net/joshcrowe/u1wc7zcn/1/
body {
padding: 0;
margin: 0;
}
div {
background-color: purple;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: 1em;
}
<body>
<div></div>
</body>
This should be easy and has been answered 100 times, but for some reason it's not working in my code.
I want to have my footer always be at the bottom of the page, but for cases when the content doesn't fill up the full page, it should still sit at the bottom (eg: not always fixed at bottom:0)
HTML
<div class="home-wrapper">
<div ui-view="nav#home"></div>
<div ui-view="content#{{$state.current.name}}" class="content-div"></div>
<div ui-view="footer#home" class="footer-bar"></div>
</div>
CSS
html
{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow-x: hidden;
}
body {
width: 100%;
min-height: 100%;
overflow-x: hidden;
margin: 0;
padding: 0;
}
.home-wrapper {
min-height: 100%;
position: relative;
}
.footer-bar {
height: 3em;
width: 100%;
overflow:hidden;
position: absolute;
bottom: 0;
left: 0;
}
I thought by setting the min-height on the home-wrapper we'd have no issues... it works fine when the content area is large, but on elsewise it's shoved right up at the top of the page! I suspect this might be related to the fact that I'm using AngularJS with UI-Router for state routing, and my CSS is loaded on a per-page basis.
You can see a live example up at: http://letsdolunch-web-dev.azurewebsites.net/, click the Legal link at the bottom to see the issue present itself, http://letsdolunch-web-dev.azurewebsites.net/#/legal
I have a web app where I have a lot of tall images that I want to display horizontally centered on the page inside a scrolling div with no padding on top or bottom whatsoever, with the whole thing wrapped in a "window" like in the example code. Now, the problem here is that if you remove the font-size: 0 declaration from the .view, you get a tiny amount of padding underneath the image. Setting the font size to 0 gets rid of that padding, but at the same time, it makes the scrolling inside the div really slow in Firefox because the scroll speed in Firefox is tied to font-size, as detailed here. My question is - is there a way in this scenario to get rid of that annoying bit of extra padding without also crippling the Firefox scroll speed in the process?
I would like to avoid any kind of solutions that would rely on hardcoded values, eg. I don't want to do something like img { margin-bottom: <-Xpx/-Xem>; }, as this is not reliable cross-browser (for example, setting a 16px font size results in the extra padding being 3px in Chrome, 4px in Firefox and 5px in IE11).
HTML:
<div class="window">
<div class="view">
<img src="http://placekitten.com/300/2000" alt="kitty" />
</div>
</div>
CSS:
body {
margin: 0;
padding: 0;
}
.window {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
}
.view {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: auto;
text-align: center;
font-size: 0;
}
Playing around with my own JSFiddle I managed to figure this one out on my own - I simply needed to wrap the image in an extra div and move the font-size: 0 declaration inside it, and as a result the scroll speed remains sane in the actually scrolling parent div. Seems like posting about this ended up being a successful case of rubber duck debugging.
HTML:
<div class="window">
<div class="view">
<div class="wrap">
<img src="http://placekitten.com/300/2000" alt="kitty" />
</div>
</div>
</div>
CSS:
body {
margin: 0;
padding: 0;
}
.window {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
}
.view {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: auto;
text-align: center;
}
.wrap { font-size: 0; }
I’d like to have a div called “content” which starts at the top of the page and extends down to the bottom, even when there’s no other content. I’m trying to figure out how to do this using very simple CSS, so I can implement it on my existing site. Here's the code I’ve been playing with:
html {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
body {
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
}
#content
{
position: relative;
top: 0;
margin: 0 auto;
border: 1px solid red;
width: 70%
}
This will make a div, but it ends up being pretty much just a red line at the top of the screen. If I add height: 900px; then it will work, but I’m trying not to use specific measurements.
Use min-height:100% so that it can grow if it has to, and remove all other rules (they're not doing anything).
How about #content { height: 100%; ... }?