Another simple JS/HTML problem. How do I make a HTML element stretch to the bottom of the page always?
I tried doing height: 100%; but it stretches off of the bottom of the page (since it's not located at the top, I think.)
What's the preferred method of doing this? If you resize the window, it should make its bottom reach the window bottom.
position:absolute;
bottom:0;
top:0;
if your element not is body, use
position:relative
on parent, and specific width, and height.
Try this: http://jsfiddle.net/bBhUX/
Add
position: fixed;
overflow: hidden;
into the parent container
Use
position:absolute; //or fixed if you want it to remain at constant position even when scrolled
bottom: 0;
Related
I have a header div, which i want to see all the time even if i scroll down.
I want it always on the top of the page.
Which code should i add to my CSS file?
Or do i need to add a javascript inside my .php file?
Apply the below css to your header div
position: fixed;
top: 0px;
if header fixed top
change:
.Your_class{
position:fixed;
top:0;
left:0;
}
Fix the header to the top:
.header {
position: fixed;
}
Move the rest of the content below the header:
body {
padding-top: 50px; // Height of your header
}
Setting position to fixed will take the element out of the normal flow of the document and display them on top of (or under) the normal flow. If you want to avoid having other elements hidden under the fixed element you need to use margin or padding in the appropriate places - in this case a top padding on the body element will do the trick.
I have the following element in my initial page concept:
http://tinyurl.com/bcmcxp9
The ribbon is a PNG image. What I'd like to be able to do is position this image exactly over the border of a box-shadowed div (representing the page content), without affecting the page width.
I've tried a couple of techniques.
By using position:absolute, I've been able to achieve the visual effect I was looking for, but it brings up the dreaded horizontal scrollbars! I want the edge of the div (not the edge of the image) to represent the edge of the page.
#banner-ribbon {
background-image: url(ribbon-right.png);
background-repeat: no-repeat;
position: absolute:
width: 419px;
height: 114px;
left: 700px;
top: 400px;
}
By using a div that sits between the content wrapper and the background, I've been able to position the image in the right place without affecting the horizontal scrollbars (sort of, I might need a little javascript to absolute-position it relative to the center), but I can't raise the image's z-index above its child divs!
#banner-ribbon-wrapper {
background-image: url(ribbon-right.png);
background-repeat: no-repeat;
background-position: 90% 400px;
z-index: 70; /* does nothing */
}
Any ideas?
It sounds like the image is extending the boundaries of the page, causing the horizontal scroll bars. One way to fix this may be to set a width for your page and then hide anything that goes outside of it. Something like this may work for you:
body {
width: 100%;
overflow-x: hidden;
}
Example jsFiddle
Give your content div
position: relative
and to your ribbon
position: absolute
right:0
Make sure your image don't extend boundaries uncontrollably.
Working sample on JsFiddle:
http://jsfiddle.net/BrvJk/
I have a menu bar that I want to place at the bottom of my screen. I've set the positioning to absolute and the distance from bottom to '0', but for some reason, it won't move from the middle of the screen, regardless of how I try to position it. Can anyone catch what I am doing wrong?
<div class=bmenu>
<img src="bottommenu.gif" width=100% height="39" alt="" />
</div>
<style>
.bmenu
{
position:absolute;
z-index: 2;
bottom:0;
left:0;
width:100%;
}
</style>
Edit:
Several commenters have said that this code places it at the bottom for them. Does this mean that the problem is coming from the way this code fragment is interacting with the rest of the code? Does anyone know what could cause that?
If you use any of the browser's web inspectors, you'll see that the height of your <html> and <body> elements aren't 100%, but auto, which means they'll only be as tall as the content within them expands them to.
What you need to do is set the height of these elements, like so:
html, body {
height: 100%;
}
This will force them to fill the full height of the viewport. The only caveat is that this requires you to define margin-top, margin-bottom, padding-top and padding-bottom on other elements, since margins and paddings will be added on top of the height, which is not what you normally want when defining height (or width, for that matter) in %.
try to use this code:
.bmenu
{
position:fixed;
z-index: 2;
bottom:0;
left:0;
width:100%;
}
I am creating a page that has a background image and the content is within a centered container that runs vertically down the page. Similar to the Yahoo! Answers layout: http://uk.answers.yahoo.com/
If you minimise your browser while on Yahoo! Answers the vertical scrolling just becomes 'longer' and the content all stays on the white container.
However, on mine when I minimise my browser the content towards the bottom of the container overflows and appears on the background image instead. I want the container to expand..
I do not want to use the overflow:auto or any other overflow attributes and I don't like the scroll bars.
Please see below and thank you in advance:
body {
background-image: url('images/ppback.jpg');
padding: 0;
margin: 0;
width:100%;
height:100%;
}
#container {
position: relative;
background: #440077;
width: 770px;
margin:0 auto;
top: 0px;
height: 100%;
opacity: .7;
filter:alpha(opacity=70);
)
Just remove the value height: 100% from #container. This is setting the max height of your container to the same height as the browser window, preventing anything longer than the window from being displayed.
I'm guessing that you added this property so that the entire background will display on the page when there is little page content. To get the effect you're looking for you may have to create a separate div, in a fixed position, and positioned center, with a z index smaller than your main #container.
My site, a course catalog tool for universities, has a center pane that contains a dynamically updated list of classes. In Firefox, Opera, and Chrome, the center pane has the intended scrolling behavior: when the class list exceeds the height, the center pane has a scroll bar. IE, however, only shows this bar when the height is explicitly set. Without using JavaScript to reset the center pane height on resize, how can I force Internet Explorer to show the scroll bar?
The center pane:
<div id="middlenav">
<div id="middleheader"></div>
<div id="courselist"></div>
</div>
and its CSS:
div#middlenav {
position: absolute;
left: 250px;
right: 350px;
top: 0px;
bottom: 0px;
}
div#courselist {
overflow: auto;
position: absolute;
top: 55px;
bottom: 0px;
width: 100%;
}
It looks like the center pane isn't obeying the bottom: 0px; statement, and is expanding to the full height of the contained #courselist. I tried body { height: 100% } but that didn't fix it either.
"The top property overrides the bottom property..."
https://developer.mozilla.org/en-US/docs/CSS/bottom
Change top to auto instead of 0px:
div#middlenav
{
position: absolute;
left: 250px;
right: 350px;
top: auto;
bottom: 0px;
}
That should fix the bottom positioning. Remember, if #middlenav is positioned absolutely, it will be relative to whichever parent element has position:absolute; or position:relative;. If #middlenav has no parent elements that are positioned, it will be relative to <body>.
I'm not sure why you have #courselist absolutely positioned; since it is inside of #middlenav I would think you could leave it static or position it relatively. But regardless of what you do, I think you need a height set on #courselist or #middlenav. The default value of height is auto, so there won't be a scrollbar because the element will expand to fit its content.
I know this question was asked 3 years ago, but I'm posting this for other people who may have a problem with CSS positioning. Cheers!
While it is perfectly acceptable to set opposite edges when using absolute positioning in CSS, limitations in Internet Explorer mean that the approach may not work there.
There is no way to avoid the bug in Internet Explorer 6. In Internet Explorer 7 and newer, triggering Standards Mode will resolve the issue.
Faking columns that extend to the bottom of an element is usually achieved using faux columns.
position: absolute; bottom: 0px; sets the element right on the bottom of the element. But it has to know where the bottom of the element is. If you set the height to 100% or have it in another element positioned bottom: 0px; Then it doesn't know where the bottom is, unless one of those elements is inside (taking up the full height of) and element with a fixed size. You can't give the body a height of 100% because it would just sort of go on forever. Try specifying the height of the body or some containing element. :D
Ensure that your doctype is set to HTML strict, otherwise IE will behave quirky and get confused with among others positioning and overflows.
Add this to top of your page:
<!DOCTYPE html>
I am not quite sure if i fully understand but I think you want the center pane to scroll when it reaches past a certain height..this is how I would do it.
#middlenav { position:absolute; left:250px; top:0 }
#courselist { position: absolute;top: 55px; left:0; min-height:400px; _height:400px;
overflow:scroll; overflow-x:hidden; width:500px; }
This sets your course list in all browsers to a minimum height of 400, once that is passed a scrollbar appears. min-height is not supported in IE7 and lower so i used the IE hack _height 400 so it acts as a min height. overflow-x:hidden is hiding the horizontal scroll just in case you only want vertical. I hope this helps you.
Don't use top and bottom positioning in the same class and don't use right and left positioning in the same class, as they are contradictory values to each other.