I have a content div that loads different pages. I can't set fixed position to it because I want to scroll through it's content.
This div is loaded inside a 100% height table(#main). Problem is, if the content div has small content height(so scrollbar doesn't appear) my div moves below, like more top margin is applied. I want every page though to load on same y position.
What am I doing wrong?
Note that: Below #content there is a footer div with relative position on which I also don't want to apply fixed position property. It seems that the more the #footer is dragged down the page it is taking #content with it as well, since they are on same table row.
#main{
width:1010px;
height:100%;
}
#content{
margin-top:303px;
padding: 35px;
}
#footer{
z-index:2;
position:relative;
}
The problem is that your td height is 100%, and you didn't set the vertical-align to top. So it default to middle. :
#main td {
vertical-align: top;
}
Related
I have a div fixed inside a relative one.
my problem is, the div fixed is bigger than the other, but they have the same size:
<div id=all>
<div id=top></div>
</div>
.
#all{
width:80%;
height:100px;
border:1px solid #000;
position:relative;
}
#top{
width:80%;
height:100px;
position:fixed;
background:rgba(255,0,0,.5);
}
https://jsfiddle.net/y7yc0n21/
I need div top to be fixed.
what is wrong? Why div top is bigger than div all?
The width of the fixed element is calculated in regard to the viewport width, whereas the one for the other is calculated in regard to the width of its parent element, which is body in this case.
And the width of body is different from the viewport width, because body gets a default margin and/or padding applied from the default stylesheet – so you are taking 80% of two different input values, and therefor the results are different as well.
Eliminate the default margin/padding for body, and the problem is gone:
body {
margin:0;
padding:0;
}
https://jsfiddle.net/y7yc0n21/2/
If you specify
body {
margin:0;
}
they will become the same width.
Also I think that is not what you want as fixed is calculated relative to viewport.
fixed
Do not leave space for the element. Instead, position it at a specified position relative to the screen's viewport and don't move it when scrolled.
https://developer.mozilla.org/en/docs/Web/CSS/position
#all{
width:80%;
height:100px;
border:1px solid #000;
position:relative;
}
#top{
width:80%;
height:100px;
position:absolute;
background:rgba(255,0,0,.5);
}
If you give any element
position: fixed
it makes the element relative to the viewport instead of it's offsetParent. Therefore, the width of div 'top' is calculated 80% based on the width of the viewport and not on the basis of its parent div 'all'. So, your inner div has greater width than outer one.
I have a page with a lot of layers for the background (five layers) which should cover the entire page content (100% height and div).
Each layer has these properties:
position:relative;
width: 100%;
height:100%;
min-height: 100%;
These properties are OK if the page content is short: the divs have an height of 100% of the window, so it's ok.
The problem is when the page is longer (look the following example). The layers have a 100% height of the browser window, not the actual content height.
That's because (I suppose) of the height:100% property. Removing it, it's fine for long pages, but not for shorter ones.
JSFiddle: http://jsfiddle.net/cfMHm/
How can I fix this?
In the tag where your content is being displayed, you could add the CSS property overflow
http://www.w3schools.com/cssref/pr_pos_overflow.asp
You can use it to trim the excess content, or add a scrollbar.
EX.
.class {
overflow:auto;
}
what about scrolling the longer content
#actual_page {
width: 990px;
margin: 0px auto;
height:100%;
overflow:scroll;
background-color: pink;
}
fiddle here http://jsfiddle.net/Jammycoder/cfMHm/1/
Instead of
height:100%
You can try:
min-height: 50% (or whatever you need it to be).
See the cyan here:
http://jsfiddle.net/cfMHm/2/
Remove the height:100% from your layers CSS.
I'm busy with creating a website that preferably needs to have a background picture that covers the whole screen but when the visitor scrolls down other content appears.
So far I got this working with creating 2 div's (which I call #container_page1 and #container_page2). This is the css of the first div:
#container_page1 {
background-image:url(images/background.jpg);
background-size: cover;
position:absolute;
margin:0px;
width:100%;
height:100%;
}
This is the css of the second div:
#container_page2 {
background-color: #F00;
height: 2000px;
width: 1000px;
margin-right: auto;
margin-left: auto;
}
The problem is that the content of the second div appears underneath the first div, obviously caused by the fact that the first div is absolute positioned.
Of course I could get the content of the second div to be placed lower with margin or padding but this won't work nicely because of different screen resolutions.
Here you can see what I did so far: http://kmnew.kadushimarketing.com/index.php. You'll also see the "learn more" button that links to an anchor in the second div.
Does anyone has a suggestion to get the second div starting where the first div ends?
Wrap the two divs into one parent div. Then give that parent div an absolute position and position the two inner divs next to each other inside that div.
If you need each section to have it's own special background and be exactly the size of the browser, why do absolute position at all?
Using a style like:
body, html{
width:100%;
height:100%;
margin:0;
padding:0;
}
section{
width:100%;
height:100%;
background-image:url(images/background.jpg);
background-size: cover;
}
Then positioning all your content divs relative, you should be able to maintain browser-sized background and let the sections stack in order.
If you want to control the position of the section contents you could use a structure like:
<section>
<div class="content">
Section content goes here
</div>
</section>
With corresponding CSS:
section .content{
width: 500px;
margin:0 auto;
}
Which would fix the content to a width of 500px and center it on the screen. Hope this helps!
I working on a page with a footer. The footer's positioning is like it should, but I have an problem when i resize the browser from bottom to top. For details, you can see the image below :
Here it's my css footer code :
.footer_page {
color: #fff;
text-align: center;
bottom: 30px;
width:100%;
position:absolute;
}
Someone have an suggestions ?
Thanks.
The bottom 30px signifies bottom of the window. Calculate the distance from top you need your footer to have and give
top:500px
A better way is to give a large div id="page" around your entire page with required height, say 1000 px, and then footer with bottom 30px.
#page{position:absolute;height:1000px}
#page #footer{position:absolute;bottom:30px}
If this seems too much or height of page is variable, let footer be part of flow of the document.In such cases it is better not to use absolute positioning.
You can also do this with some javascript magic.
What I am saying is, suppose total height of your page is 1000px. Put a wrapper around entire page with id page, give absolute positioning and height 1000px, then put footer in the end.
If you mean that the footer doesn't stay fixed to the bottom, try
.footer_page, .push {
clear: both;
color: #fff;
text-align: center;
bottom: 30px;
width:100%;
position:absolute;
}
so adding .push and clear:both.
I have a div ( position :fixed ) with varying height depending on the content in it. To have an auto scroll for that i have added overflow-y:auto and assigned a fixed height.
Is there a way to auto set the height of the div so that when the browser space gets changed, the height of the div changes accordingly, and if there is not enough space the scroll bar appears and when there is enough available space the scroll bar disappears.
use position:absolute instead of position: fixed and use the top left, right and bottom co-ordinates and set the scroll to auto;
example HTML:
<div id="resize">
<p>content</p><p>content</p><p>content</p><p>content</p>
</div>
CSS:
#resize {
background: #f00;
color: white;
position: absolute;
top: 100px;
left: 200px;
right: 200px;
bottom: 100px;
overflow: auto;
}
p {line-height: 3; margin: 0;}
Working Example : Here
Use two DIVs, one nested inside of the other.
The outer DIV should be set to position:fixed;max-height:100%;overflow-y:auto
The inner DIV will contain your contents. So far as I can tell, it won't require any specific styles.
What should happen (and what's happening when I test this fix in my browser) is that the outer DIV should shrink-wrap to fit the inner DIV -- but it will not exceed the height of the window. If the inner DIV exceeds the height of the window, it will also exceed the height of the outer DIV, producing a scrollbar.
EDIT: Sample markup:
<div id="outer">
<div class="inner">
Content goes here.
</div>
</div>
And the CSS:
#outer{
position:fixed;
max-height:100%;
overflow-y:auto;
bottom:0; /* sample value */
left:0; /* sample value */
}
#outer div.inner{
/* Whatever style you want the positioned box
to have. Border, padding, background, etc. */
}
You can listen to the resize event on the window and update the width accordingly.
$(window).resize(function() {
});
http://api.jquery.com/resize/
Alternatively, depending on the layout of your page, you might be able to just use height: 100% (or another % that works for you).