I'm trying to get rid of the iFrame scrollbar and give this task to the container div. The thing is that I'm using margins so I don't like to have the scrollbar in the middle of the page. I would like to move it o the very right of the screen.
Is there any way to achieve that?
my code is:
div#content {
background: white;
left: 3%;
right: 3%;
bottom: 0;
top: 80px;
position: fixed;
}
On the iFrame I have added
scrollbar = no
but then I cannot see the whole content.
Any help is greatly appreciated.
You need to set the size of the iframe. Then the container div needs to have overflow-y: scroll
Here is an example: https://jsfiddle.net/cj771ry7/1/
Related
I have fixed(position property) element called nav-map. I want to set max width to that element.
.nav-map{
position:fixed;
left: 0;
width: 100%;
top: 0;
overflow: hidden;
}
but in that case it covers my scrollbar and i want to avoid that.
please, help me solve the issue
full source code:
http://codepen.io/borispinus/pen/adpEWa
The problem is that, your scrollbars are part of another div, and it would be nice, if you can bring the div below the fixed nav.
So in the <body> give a padding-top of the height of the fixed nav.
body {
padding-top: 40px;
}
This is how I do for all the fixed navs. This is how it has been done. :) See how it looks here:
Fiddle: http://codepen.io/anon/pen/QyqBZQ
I have this site:
http://dl.dg-site.com/functionmentes/
There is a div with color #D9D9D9
Code CSS:
#full_bar{background:#D9D9D9;width:100%;height:100px;}
I want to my div to be the full width site and to be glued to footer.
How can i make this?
I use a theme in Wordpress.
Thanks in advance!
By making the position fixed, this will ensure that it will follow the user as they scroll up and down your website.
#full_bar {
background: #d9d9d9;
width: 100%;
height: 100px;
position: fixed;
bottom: 0;
left: 0;
}
If you add position:absolute; left: 0; to the css, the bar will more or less do what you're trying to do, but it's a dirty hack.
The real problem is that you're adding your 'full_bar' in the wrong place (inside a div which restricts the width). Personally I would opt for placing the full-bar in your <footer> tag.
You should placed your gray bar outside the section, between section and footer or on footer on html.
But if you want a css solution, you need to put your section parent to position relative and set your gray bar on absolute bottom with full width:
section {
position: relative;
padding-bottom: 100px; // Your bar height
}
#full_bar{
background:#D9D9D9;
width:100%;
height:100px;
position: absolute;
bottom: 0;
left: 0;
}
You are putting #full_bar inside class="container". container is the parent of div id #full_bar, that's why its not taking full width.
Do your code outside contaner class and you can see the changes.
See the attachment, i think you want this as per i understand your question.
How would i go about making the div i am using to contain the page stretch all the way to the bottom of the page.
You can see that here: http://csgoshack.com/shop/index.php?page=cats The white div don't go all the way to the bottom of the page this is making it ugly.
Whats the best way to go about making this always stretch to the bottom of the page relative to the browser size?
Thanks.
If you need any code of the website to help me do this please ask.
EDIT Right all i really want is that white bar to stay static over the background and then let the products scroll over the white box so its always in the center of the page how is this possible?
I would move the top bar outside of the whitebg as it might make this easier.
Set your body:
padding: 0;
Set your .whitebg:
position: relative;
left: 50%;
margin-left: -625px;
top: 0;
padding-top: 60;
height: 100%;
You'll probably notice how you have a scroll bar on the right even when it isn't necessary. I think moving the top bar out of the whitebg will remove your need for the padding-top: 60 which should help get rid of the scroll.
** EDIT **
If you move the top nav bar outside of whitebg I think it works well leaving a lot of your css as-is.
.whitebg
position: absoulte;
left: 50%;
margin-left: -625px;
top: 50px;
padding: 10;
height: 100%;
** EDIT #2 **
The key here is to get your background to encompass the area you desire. Then user other inner elements to handle positioning of the contents within. If you try to add a margin or padding onto the outer most background element, you'll find that it will exceed the desired size since those will always add on to the height or width.
.holder
remove the padding-top
.whitebg
remove all padding
.bodycon
add margin-top: 50px;
change margin-bottom to a normal margin
.fotter
add a margin if desired
Try setting height: 100% on .whitebg selector
Just inspected your page..try to set the bottom: 0px; to your whitebg class
.whitebg {
..your existing code..
bottom: 0px;
}
First ill ask why you have all meta tags in body?:)
If the blue bar is fixed position you can try
html, body{
height:100%
}
.whitediv{
height:100%;
}
Or just doo simple jquery:
var docheight = $(document).height();
$('.whitediv').height(docheight);
And make it as function on window.resize
This Code should help you,
.WhiteBag{
height : 100Vh;
}
Ask if you have any doubt
Add these in style
.whitebf
{
height:800px;
width:100%;
}
this one in your footer
footer
{
position:absolute;
bottom:0px;
}
I am trying to create a footer that is responsive and sticks to the bottom right of a page but can't get it to work consistently when a absolutely positioned div is on the same page.
The code I am using can be seen at:
http://192.241.203.146/sample-page/
I have tried:
position: absolute;
bottom: 0;
right: 0;
margin-bottom: 10px;
margin-top: 40px;
As well as:
float: right;
bottom: 0;
right: 0;
margin-bottom: 40px;
margin-top: 40px;
To get it to work, but it does not respect the absolutely positioned content on the page when it is resized down to mobile. It clashes like so:
I know that using position:absolute means that the div is removed from the flow of objects but I need to use it on the element in the middle of the page to avoid the objects jumping around when I use jQuery fades.
I suspect this is because it is not inside a span or row as per the bootstrap base I am using. Is that the problem?
I'm at a loss here - any guidance appreciated :)
Your problem is that the div is normal to the page, but his position is absolute. Inspecting your code i saw this:
if you want the footer is always visible in the bottom, you can wrap the footer to the div which width will be 100% of the width of the page. Like this:
div#footer_container{
min-width: 100%;
min-height: 100px;
position: relative;
}
div#footer_container div#footer{
position: absolute;
right: 0px;
bottom: 0px;
}
Result:
Red - main container of your page, Green - container of your footer (its always will be after the main container), Blue - your footer.
P.S. sorry for my english :)
I think I've found it!
Try this:
.main {
padding-bottom: 140px;
}
It works for me even if I reduce the width of the browser.
In brief example I'm trying to do a div chat example to simulate a facebook chat.
I fixed it on the right with z-index 300 to always be showed.
My problem is about height because some pages I have scroll and large height view and my chat div fixed on the same original page height, if I scroll up or scroll down I limit the height of my div.
I wonder it just fixed enough to stay visible on the page in the same original way even I scroll page up or page down.
My sample CSS is:
#chat {
position: absolute;
top: 0;
right: 0;
float: right;
height: 100%;
min-height: 100%;
width: 200px;
background-color: #6e9bfe;
z-index: 300;
}
Any tips would be very helpful, thanks!
If I'm right in thinking you want this div to stay in the same position as you scroll up and down the page you want to use position:fixed; instead of position:absolute; in your CSS.
Use position:fixed; instead of position:absolute;