I would like to extend my div element to whole page but I dont want to set te scrollbars for page. I tired $(window).width and $(document).width but when i set this to my css the scrollbars appears. I cant add CSS width: 100% becouse other stuff in my application base on width in pixels not percents so it cant be done like this. Can anyone help me?
Create a #mydiv that contains everything and then :
#mydiv { position: absolute; bottom: 0; left: 0; top: 0; right: 0; overflow: hidden}
Should make it.
OK I fugred it out.
I set in CSS width: 100; height:100% and then by JS I get dimensions in pixels by $('#element').width()
Related
This question already has answers here:
How to make a div 100% height of the browser window
(39 answers)
Closed last year.
I’m trying to create an EMPTY div that takes up 100% of the viewport and that moves with the viewport (or position: fixed).
It also needs to be at top: 0, left 0 of the viewport. This is for a browser extension so I need this div to be added over any page.
The background reason for this is so I can use the div as a full page tooltip that shows the mouse x and y positions and the tooltip follows the mouse.
How can this full page div be achieved? My many attempts have failed to create a div with any height.
I am away from my pc but can add what I’ve tried already soon.
Try this
{
position:absolute;
inset:0;
width:100vw;
height:100vh;
}
first add an empty div to body then use this :
{position: fixed;
top: 0;
left: 0;
background: red;
right: 0;
z-index: 999999999;
bottom: 0;}
this pure css code is enough and you dont need any javascript even after resize.
.empty-div {
position: fixed;
inset: 0;
}
The inset property is a shorthand for top, right, bottom and left which will stretch the div to all corners.
In order to place the div at the very top, over everything else, it's best to insert the div at the very end of the page; just before the closing </body> tag.
To be on the safe side, you can also add z-index: 9999999.
Try this stylesheet and with some JavaScript code will help you to achieve a full page div.
#full-page-div {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: none
}
I have added the extra "overflow: none" because height may get more than browser window's height and we don't need to show the scrollbars.
Now, in the JavaScript code, we need to adjust the div height to the full page height, also need to add a handler to window "resize" event, so as to adjust that full page div height and width.
function ExtFullPageDivAdjust()
{
let fullPageDiv = document.getElementById("full-page-div");
fullPageDiv.style.height = Math.max(window.innerHeight, document.querySelector("body").clientHeight) + "px";
fullPageDiv.style.width = window.innerWidth + "px";
}
ExtFullPageDivAdjust();
window.addEventListener("load", ExtFullPageDivAdjust);
window.addEventListener("resize", ExtFullPageDivAdjust);
Try this
{
position: fixed;
height: 100vh;
width: 100vw;
}
I'm using this link to include Google Maps in my Ionic app.
It works fine, but I would like it to fill the entire height that is still available beneath the header.
I'm only able to give it a height in px, like so:
.angular-google-map-container { height: 200px;}
The moment I change it to %, it doesn't show the map anymore.
Anyone who can help me with this?
Everytime you are using a percentage you have to ask yourself "Percentage of what?"... Since you didn't provide the whole code it is impossible to answer you perfectly.
By using .angular-google-map-container { height: 200px;} you are forcing all parents container to increase their size to fit the 200px height. That's why it works.
A dumb fix would be using view port height value. Something like :
height: 80vh;
Which is 80% of the view port height.
I managed to make it work using:
.angular-google-map-container {
position: absolute;
top: 20px;
bottom: 0;
right: 0;
left: 0;
}
My Website : http://calisyo.com/product-category/?product=?/jacket-2-poche/
i have problem with my menu when i scrool hes scroll also
in this page I want the top menu to stay on the top of the page when a user/member scrolls.
so looking at your site, when I played around in the Dev tools if i commented out the "banner--stick" css it stayed at the top the whole time. I would only use the position fixed and try not to mess with JS to change the css class you the page is scrolled
use below css
position: fixed;
top: 0;
left: 0;
z-index: 9999;
width: 100%;
margin-top: 0;
Try adding this CSS rule:
header#masthead.banner--stick {
margin-top: 0;
}
I have something like this:
<body>
<div style="width:700px; margin:0 auto;">
<div class="inner-div"></div>
</div>
</body>
Is there a way to expand child div with class "inner-div", to 100% of body width?
This makes inner-div stretch from left to right:
div.inner-div {
position: absolute;
left: 0;
width: 100%;
}
This is an old post but I found a better solution here: How can I expand a child div to 100% screen width if the container div is smaller?
So in this case it would be
.inner-div {
width: 100vw;
margin-left: calc(-50vw + 50%);
}
I have not tested this but it might work:
You need jQuery for this.
//I'm using a resize event in case the body with changes. At least i think that will work.
window.onresize = function(event) {
var bWidth = $("body").width():
$(".inner-div").width(bWidth);
}
Not with css only. Since you set a with of 700px for the parent the child inherits this.
But you can do this with javascript. Here with jquery:
$(window).bind("load resize", function(){
$('.inner-div').width($('body').width());
});
It works even if you resize the window.
Let me correct this a little bit.
You also need to give your stretching element some "min-width" value in pixels/em and (not necessary but good practice) give the body element a min-width, too.
i.e.:
body {
min-width: 1000px;
}
.outer {
width: 1000px;
height: 200px;
margin: auto;
}
.inner {
position: absolute;
min-width: 1000px;
height: 100px;
left: 0;
right: 0;
}
If there is no min-width set and your HTML/CSS isn't built for a responsive site you can see an error at the inner DIV element when resizing the browser window. The property "width: 100%" makes the element stretch always to 100% browser window size. Therefore if the browser viewport gets smaller than the content and scrollbars appear, the inner DIV stays at the actual browser viewport size causing the appearance seems broken when you scroll the site.
You can try it here: http://jsfiddle.net/W4vum/
Try changing the "min-width" value at the ".inner" DIV in the example from 1000px to 100%, resize the window and scroll to the side, then you see it.
If you give width 100% to inner-div, it will fit the width of the outer div.
A little example of how to do it with css, so it is the same in javascript with setting the attributes I guess : http://jsfiddle.net/u8mJW/.
To make this work in pure CSS all parent elements have to be position:static;
(or without the position attribute, because static is default)
after that you can use Stefan's code
div.inner-div {
position: absolute;
left: 0;
width: 100%;
}
(corrected Ricola3D's Fiddle: http://jsfiddle.net/u8mJW/23/ )
I found this awesome .js called kinetic. I've been messing with the html, css for sometime now and am unable to set the container to full screen.
http://designobvio.us/v4design/demo.html
I've set all the parents to 100% height and tried a fullscreen jQuery. Unfortunately still no luck.
I've paired down the code as much as possible for readability. As you can see I've set the height to just 400px because it just goes crazy otherwise. If there's any thing else i can offer as support, please don't hesitate to ask.
As a second request would anyone have any idea how to set the border to inside. Or make sure that the width fits nicely with borders as is?
You can position your #wrapper div absolutely and just stretch it in all directions with the top, right, bottom, left properties like so:
CSS
#wrapper {
border: 5px solid #000000;
bottom: 0;
left: 0;
overflow: hidden;
position: absolute;
right: 0;
top: 0;
}
With this method the borders play nicely with the positioning, but if you want to place them inside your container you can set the border style to inset instead of solid. Also, your control buttons will disappear so to make them pop in front of your image just set them to position:relative and give them a large z-index so they appear on top of everything else.