If I have a div#child that's positioned at left: 5000px, and my window is narrower than that, is it possible for my div#parent to be wide enough to contain its child?
A width: 100% is only as wide as the body, which doesn't contain the child. I don't know the width/position of the child. I'd prefer not to use JavaScript (but if I have to, how?).
Absolutely-positioned elements are no longer part of the layout. The parent has no idea how large the child is. Yes, you need to use JavaScript to adjust the width of the parent based on the size and position of the child.
parentWidth = childWith + childLeft
I think that you should use JavaScript/jQuery for your goal. Here is a sample solution in jQuery: http://jsfiddle.net/hU2TV/
CSS
#parent {
width: 100%;
background-color: red;
height: 100px;
}
#child {
position: absolute;
left: 700px;
background-color:blue;
width: 50px;
height: 50px;
}
JS
(function ($) {
var child = $('#child'), parent = $('#parent');
if (child.offset().left + child.width() > parent.width()) {
parent.width(child.offset().left + child.width());
}
}($));
HTML
<div id="parent"><div id="child"></div></div>
Best regards!
Related
A simple question that might help me to ask a more complicated problem that I will not explain here now.
Do you know why the red color does not take all the background of the page?
https://stackblitz.com/edit/angular-hp237w?embed=1&file=src/app/app.component.html
Of course in my problem I do not want to modify the files 'index.html' and 'style.css'
Thank you in advance, have a nice day
Your background-color: red only applies to your div, which has a height of whatever total height of the elements within it by default. In order to take place of the entire page you just need to set the height to 100vh
.back {
height: 100vh;
background-color: red;
}
The parent block element, in this case <body>, does not have a 100% height. It also has by default a certain margin. The body element's block parent also has no height set. This is the <html> tag. You can fix this in two ways if you don't want to edit a global css file:
Add this in your component css, which is pretty ugly and so much frowned upon
::ng-deep body,
::ng-deep html {
height:100%;
margin: 0;
}
.back {
height: 100%;
}
Another way is to make the position absolute. This work because the relative parent of the element is the <html> element viewport:
.back {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
I'm trying to use percentage height with overflow-y:auto; and instead of creating a scroll bar on the side of the div, it's using the page scroll bar.
Here's an example of want I'm getting at: http://jsfiddle.net/hmwe2jty/
Is it possible to use this property with percent height?
TL;DR Use the viewport height/width instead of a percentage. Change 100% to 100vh, and you're done!
EDIT:
The percentages take the precentage of the parent element. For example:
console.log("Parent's width: " + document.getElementById("parent").offsetWidth);
console.log("Child's width: " + document.getElementById("child").offsetWidth);
#parent {
background: yellow;
width: 500px;
height: 150px;
}
#child {
background: orange;
width: 50%;
height: 100px;
}
<div id="parent">
<div id="child">
I am 250px wide!
</div>
</div>
The new CSS3 viewport units use the user's viewport as a base. For example:
console.log("Parent's width: " + document.getElementById("parent").offsetWidth);
console.log("Child's width: " + document.getElementById("child").offsetWidth);
#parent {
background: yellow;
width: 500px;
height: 150px;
}
#child {
background: orange;
width: 50vw;
height: 100px;
}
<div id="parent">
<div id="child">
My width is 50% of the user's viewport, regardless of the size of my parent!
</div>
</div>
Because the body element is a bit weird, it's default behaviour is to shrink to fit is contents. So:
body {
background: yellow;
border: 1px solid red;
}
The body element wraps around it contents, <br>
but the backgound just ignores this behaviour.
So, since the parent element is the body, you will need to use the new vw and vh units. Read a article on CSS Tricks
EDIT 2:
Another way to choose the viewport as parent would be to make the element's position either fixed or absolute. In that instance the parent would become the viewport, thus giving you the needed value.
use this css for div which height must dimensioned in percents of parent element:
.child {
position: absolute;
top: 10px;
bottom: 0px;
}
It is considering 100% of the parent, which is the body. Hence it occupies the height of complete space available. Specify height a lesser amount in % rather than 100 (if you specifically prefer percent). It is upto you what you chose.
I'm trying to break out of a parent div so I can have a colour div cover the width of the browser.
However, for some reason it pushes the block off to the left.
This is my site.
This is my code:
HTML:
<div class="aboutTop"></div>
CSS:
.aboutTop{
width: 100%;
height: 600px;
background-color: black;
margin-left: -100%;
margin-right: -100%;
}
Where am I going wrong?
To make your div "break out" of its parent, you'll have to use position: relative;
HTML:
<div class="aboutTop">
<div>break out!</div>
</div>
CSS:
div
{
width: 100px;
height: 100px;
border: 1px solid #000;
}
.aboutTop div
{
position: relative;
top: 50px;
left: 50px;
}
This is because child elements are restricted to the boundaries of their parents. USing positioning takes the element out of the document flow. Using relative positioning takes it out of the flow but uses its original position within the parent as the point of reference. Absolute uses the top left corner of the browser window as its reference. :)
http://jsfiddle.net/qkU7F/
The width will always reference the parent div, no matter what. So you can use jQuery to set the width of the element based on the window width.
var winWidth = window.innerWidth;
$('.aboutTop div').css("width", winWidth);
http://jsfiddle.net/qkU7F/3/
In this:
margin-left: -100%;
margin-right: -100%;
The percentages are relative to the parent element.
So if the parent element is 200px wide 100% will be 200px.
If you want something to span the width of the browser you have a couple of options:
Use absolute position and left:0; right:0;
make the element a direct child of the body element and set it's width to 100%
.aboutTop{
position:fixed;
width: 100%;
height: 600px;
background-color: black;
margin-left: -100%;
margin-right: -100%;
}
When you give a width:100% without positioning, it will take 100% with respect to parent division. You need to make it fixed, or you need to change the width of the parent division.
The code you write, must from start be aimed at what you want to achieve. For something like this, you should not have a parent division with less width.
If yo use relative positioning, or absolute with negative margin the width will still be 100% of parent division. You will have to increse width to something like 110% to achieve.
I think it's better to remove padding of your div #site. let it to have full width of browser.
then apply padding to children divs as you want.
You're setting width: 100% but also margin-left: -100%. This means that the element will span from -100% to 0.
Since you're also setting margin-right: -100% it looks like you want it to span from -100% to +200%, which means you need to set width: 300% instead.
Ran into a spot where I absolutely HAVE to use ap divs. The problem is: I can't find a way to clear my wrapper div. None of my tricks are working.
I wanna lose the height setting for wrapper div and still contain the ap divs.
Any ideas?
<pre>
<code>
#wrapper {
position:relative;
width:600px;
height:1200px; --- wanna dump this but can't find way to clear
margin-right: auto;
margin-left: auto;
background-color: #0CF;
z-index:100;
}
#apDiv1 {
position:absolute;
width:200px;
height:115px;
z-index:1001;
left: 89px;
top: 329px;
background-color: #0C0;
}
#apDiv2 {
position:absolute;
width:100px;
height:50px;
z-index:1000;
left: 383px;
top: 36px;
background-color: #F39;
}
div id=wrapper
div id=apDiv1 closediv
div id=apDiv2 closediv
div-- close wrapper
Clearing is used for floats, not absolutely positioned elements. You cannot clear absolutely positioned elements.
You can't. You have to specifiy the height of the wrapper to contain the inner absolutely positioned elements. Absolutely positioned elements don't take up any space, therefore it's impossible for the wrapper to wrap around them.
And ap divs are wonderful when used in the right context. You shouldn't "yuck" them out of hand.
You can get highest child and append this highest height to parent by jQuery below
var t=0; // the height of the highest element (after the function runs)
var t_elem; // the highest element (after the function runs)
$("*",elem).each(function () {
$this = $(this);
if ( $this.outerHeight() > t ) {
t_elem=this;
t=$this.outerHeight();
alert(t);
}
});
Is there anyway for an absolute positioned child to expand to fill its relative positioned parent? (The height of parent is not fixed)
Here is what i did and it is working fine with Firefox and IE7 but not IE6. :(
<div id="parent">
<div id="child1"></div>
</div>
#parent { position: relative; width: 200px; height:100%; background:red }
#child1 { position: absolute; top: 0; left: 200px; height: 100%; background:blue }
That's easy. The trick is setting top: 0px and bottom: 0px at the same time
Here's the working code
html, body {
width: 100%;
height: 100%;
overflow: hidden;
}
#parent {
display: block;
background-color: #ff0;
border: 1px solid #f00;
position: relative;
width: 200px;
height: 100%;
}
#child1 {
background-color: #f00;
display: block;
border: 1px solid #ff0;
position: absolute;
left: 200px;
top: 0px;
bottom: 0px;
}
Check out a working example here http://jsfiddle.net/Qexhh/
If I remember correctly there is a bug with how IE6 handles div height. It will only create the div to the height needed to contain the content within it when height is set to 100%. I would recommend two approaches:
Don't worry about supporting IE6 as it is a dead browser anyway
If that doesn't work, use something like jQuery to get the height of the parent div and then set the child div to that height.
fake it by setting the backgrounds to be the same colour so no-one notices the difference
You can achieve this with setting both the top and bottom attributes of the child.
See how this is done
At the bottom of that article, there is a link to Dean Edwards' IE7 (and IE8) js library that you should include for IE6 visitors. It is a JS library that actually MAKES IE6 behave like IE7 (or 8) when you include it. Sweet!
Dean Edwars' IE7 and 8 JS libraries
As far as I know, there is no way of expanding a parent element around an absolutely positioned child element. By making the child element absolutely positioned your are removing it from the regular flow of page items.
I recently built a 2-column website where the right column was absolutely positioned but the left column was not. If the left column had less content and a smaller height than the right column, the page would cut off the right column since it was absolutely positioned.
In order to resolve this, I had to determine if the height of the right column was greater than the height of the left column and if so set the height of the parent div height to the greater of the two.
Here is my jQuery solution. I'm not much of a coder so feel free to tweak this:
jQuery(function(){
var rightColHeight = jQuery('div.right_column').height();
var leftColHeight = jQuery('div.left_column').height();
if (rightColHeight > leftColHeight){
jQuery('.content_wrap').height(rightColHeight+'px');
}
});