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>
Related
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.
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'm working on a lightbox. I need it to be dynamically sized based on its content. But I also need it to be centered in the screen. I'm trying something like this:
HTML:
<div class="lightbox-background">
<div class="lightbox">
LIGHTBOX CONTENT
</div>
</div>
CSS:
.lightbox-background {
background-color: rgba(0,0,0,0.9);
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 50;
}
.lightbox {
background-color: white;
width: 780px;
z-index: 100;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
height: auto !important;
max-height: 90%;
}
I couldn't make it work. I'd like to avoid using JS, if possible. How can I do it?
You could work with vertical-align: middle as well as the :before selector on the parent container. Check out my fiddle:
http://jsfiddle.net/GA5K3/2/
The best way that I know to center vertically with CSS is to absolute position top 50% then set a top margin negitave half height of element.
Since you don't know the height you'll have to use JS.
Maybe someone has a better technique.
I am trying to create a gray transparent background screen, on top of my original html page.
What I have done so far is to append a div (with jquery) to the body tag with this css style:
.spesificPropertiesDiv {
position: absolute;
display: block;
top: 0px;
width: 100%;
height: 100%;
background-color: black;
opacity: 0.5;
z-index: 6000;
text-align: center;
}
as I mentioned before I am appending a div with this class to the body.
Every works fine when I append it on large screen (24 inch) but when I am appending it on 16 inch display the gray screen div's height is 100 px less than the body's height.
One more thing that I need to mention is that on large screen the page is fit on the screen where on the smaller screen a scroll-bar appears to make the page lower side of the page visible.
Why dose this happen? How can I fix it?
Thanks!
I have changed it to:
.spesificPropertiesDiv{
display: block;
position: fixed;
top: 0; bottom: 0; left: 0; right: 0;
width: 100%;
height: 100%;
background-color: black;
opacity: 0.5;
z-index: 6000;
text-align: center;
}
and it works!!!!
Thank you all for the help
Could you try:
.spesificPropertiesDiv {
position: fixed; *position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
}
Additionally, is there any padding on this div? Is it a direct child of the <body> tag?:
<body>
<div class="spesificPropertiesDiv"></div>
</body>
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%; ... }?