How to expand child <div> with 100% of body width? - javascript

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/ )

Related

HTML5 make empty div full viewport size [duplicate]

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;
}

How to get a leaflet map canvas to have a 100% height?

My leaflet canvas currently looks like the following, with a 700px height:
However I would like its height it be 100%, in order to take the whole white space.
height:100% doesn't work in the CSS properties of the map canvas.
I found a few solutions but they are only good for Google Maps.
Does anybody has a solution, even if it's only a workaround ?
Thanks !
The best way is to use the CSS length units vh and vw. These allow a block-level HTML element to have a dimension relative to the viewport size, instead of the size of its parent element (as % does).
e.g.:
#map {
width: 100vw;
height: 100vh;
}
For reference: https://developer.mozilla.org/en-US/docs/Web/CSS/length
Using height: 100% does work, it only needs the parent containers to have a size too (working demo):
html, body {
height: 100%;
}
#map {
width: 100%;
height: 100%;
}
Just as an alternative approach: If you have a fixed height nav bar at the top, say 50px, and fixed width on the left, say 100px, then you can make the map take up the rest of the space like this:
#map {
position: absolute;
top: 50px;
right: 0;
bottom: 0;
left: 100px;
}

Using JS CSS to set position causes different outcome than the same setting using pure CSS

Here is a fiddle to demonstrate the problem:
http://jsfiddle.net/6e1vg58L/
The javascript adds the "position:fixed" to the nav-content. Everything works how I want, the nav content stays in place while scrolling down the page. Now, if you go and put "position: fixed" under "#nav-content" in the CSS, and delete the JS, it should have the same outcome, correct?
For some reason setting the position in CSS or HTML causes the entire cell to dissapear, while setting it using Javascript or any browser inspector gives it the desired output?
$(document).on("scroll", function(){
if($(window).scrollTop() > 0)
{
$("#nav-content").css("position","fixed");
}
else
{
$("#nav-content").css("position","relative");
$("#nav-content").css("top",0);
}
});
vs
#nav-content {
position: fixed;
}
At first I thought it could be something with the listener causing it to work (but why?), but after opening it up in a live browser and adding the "position: fixed" through the inspector, it works exactly how it should. This is the problem, two out of four ways give the same, desired result, but the other two give the same, undesired result.
Although I am not 100% on the exact whys I think the reason is because by declaring it fixed has the following effect.
fixed
Do not leave space for the element. Instead, position it at a
specified position
so it means content being 100% is allowed to take the whole screen when the page is first rendered. Navigation (although not the one being fixed which is the confusing bit) is on the screen but hidden by the content at 100%. the interesting thing is if you use chrome to disable the fixed property the navigation appears and then because it is now on screen reapplying the position fixed does not hide it which is why the JS route behaves differently.
the changes to fix could defining the initial widths in % relative to each other.
#content {
position: relative;
background-color: #eee;
width: 70%;
max-width: 1300px;
min-width: 450px;
height: auto;
}
and then the same for navigation
#navigation {
width: 30%;
background-color: #000;
height: 100%;
position: relative;
top: 0;
bottom: 0;
}
http://jsfiddle.net/vemtyyox/
another way to keep the navigation at 300px could be to use calc to define the width of the content
#content {
position: relative;
background-color: #eee;
width: calc(100% - 300px);
max-width: 1300px;
min-width: 450px;
height: auto;
}
#navigation {
width: 300px;
background-color: #000;
height: 100%;
position: relative;
top: 0;
bottom: 0;
}
http://jsfiddle.net/9db77jvp/
Looking closer i think there is something odd about the way display:table-cell and the fixed properties are working, maybe.

specific image resize with jquery

I've been trying for sometime to replicate an effect seen on this website:
http://www.gregparmasmith.com/
If you play around with the width and height of the window, the images keep proportionate w/h based on their aspect ratio. The images are always loaded with a consistent height, making this slideshow look very nice.
Also notice how wider images (vs thinner images) are resized when just the width of the browser window (not width and height together) is reduced - The images bounce down from the top margin.
He seems to be programming this differently than most responsive jquery image plugins I've seen. There is a parent div container, but it has a static size and seems to not govern the position/sizing of its child images.
Looking at the source, the images top,left,width,height css properties are dynamically being altered.
Any suggestions for how to do this??
The effect seen on that page can be accomplished with just html and css. No javascript needed. He's using percentages as the values for his margins so that as the browser size gets smaller, so does the calculated pixel size of the left and right margins of the div that contains the images. Then by setting the img width to a max-width of a fixed pixel size, say 400px, it will ensure it will only reach a certain width as it does on very large screens.
Then by setting the "width" to a percentage like maybe 100% the image will automatically resize to the size of the containing div because that div is responding the size of the browser.
something like this:
#inside {
max-width: 300px;
margin: 0 auto;
margin-top: 20%;
margin-bottom: 20%;
}
#inside img {
width: 100%
}
http://jsfiddle.net/wRNJ7/1/
I have found a pretty close solution here in this thread:
Vertically center image on page and maintain aspect ratio on resize
Here's a good working demo:
Demo
html, body {height: 100%}
body {
position: relative;
padding: 0;
margin:0;
font-family: sans-serif;
}
.image {
position: relative;
left: 0px;
height: 100%;
background-position: 50% 50%;
background-size: cover;
background-attachment: scroll;
text-align: center;
}
.wrap {
height: 100%;
overflow: hidden;
position: relative;
}
img {
max-width: 70%;
max-height: 70%;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
This effect is achieved without any javascript, which at first I thought was undoable. In this demo, the action of the resizing is a little different. In the original website I was trying to model (http://www.gregparmasmith.com/12), it is "clear" that resizing happens only when necessary, so that for a thin image (ex. 500x100): When the browser window is made as thin, no shrinking would occur. Resizing of the image would occur only if the width of the image would exceed the width of the browser.
In this jsfiddle, I think I can notice this same action is happening, but it's not as obvious.

How do I expand selector width from center (or other efficient alternatives)?

I've got a navigational bar (#nav_bar), which has the following CSS properties:
#nav_bar {
background: url(../images/navbar.png) repeat-x;
width: 100%; height: 50px;
margin-bottom: 20px;
}
It takes the width of #wrap which is 1024px wide and has margin: auto;, however I would like to expand it so that it will fit all screen sizes 100%. I attempted to set width: 500%; just to see what it would do, then I realized that it expands from the left -> right, rather than both ways from the center.
So, what I'm asking is;
Is it possible to have an element expand from the center, then
perhaps I could set the max-width property or use javascript to
find out the visitors screen resolution then assign the width from
there; without major inefficiencies, i.e. extended load times/cross-browser compatibility issues?
Just for reference, a link to the particular page I'm talking about
Any answers will be greatly appreciated ;)!
Simply move your #nav_bar out of the #wrap.
Alternatively you can make your #nav_bar have position: absolute; left: 0px; width: 100%; in CSS, that will work too.
Why don't you use CSS3 Media Queries, to find out about screen size of your clients.
If your #nav-bar is a block-level element, like a div, a ul or a p element, then it by default would take the whole width of its container. Thus you don't need to set width: 100%; there. Also, you can use text-align: center; to center align the content.
In your case, you can use absolute positioning with overflow: visible attribute, and set the width of the menu. Also, you may simply extract your #nav-bar out of the wrap, to let it take the whole space.
use margin: auto
you can see an example here: http://jsfiddle.net/s995c/4/

Categories