I have a div nested in two div's. The outermost and innermost div has a set width. I want to make the outermost div's width to 0, so that all its children will be 0 too, or at least not visible.
But when I make the outermost div's width to 0, the innermost div is visible.
When setting the outermost div's width to 0, how can I make the children abide by its' parent rule?
JSFiddle
var outer = document.getElementById('outer'),
small = document.getElementById('small'),
large = document.getElementById('large');
small.addEventListener('click', function() {
outer.style.width = 0;
});
large.addEventListener('click', function() {
outer.style.width = '300px';
});
#outer {
width: 300px;
background-color: orange;
}
#content {
background-image: url("http://i.imgur.com/nri7bYd.jpg");
height: 200px;
width: 200px;
}
#content2 {
background-color: red;
width: 100px;
}
<div id="outer">
<div id="inner">
<div id="content">This is some content</div>
<div id="content2">This is another content</div>
</div>
</div>
<button id="small">width = 0</button>
<button id="large">width = 300px</button>
You need to specify the child div with 100% width. You are giving it a specific width (of 200px). By setting the child to 100% you will effectively say take up as much as my parent has.
#content {
background-image: url("http://i.imgur.com/nri7bYd.jpg");
height: 200px;
width:100%;
}
https://jsfiddle.net/9vk44jq9/
You can set the CSS overflow property to hidden, which clips everything outside the container.
This sort of problem has a lot of subtle variations, so different solutions are called for sometimes.
Related
I am trying to make a container that holds some text and images, and starts out at a certain size, say 48px. Upon clicking I want the container to grow to fit the contents, and on a second click reshrink down to 48px. The main issue is I don't want to set the height for the full size container, I would like the container to automatically resize to fit the content.
I have figured out how to start the blog at full size, shrink and regrow, but I can't figure out a way to have it start small, grow, and shrink again.
const hoistingId = document.getElementById('hoisting')
function enlargeBlogItem() {
if(hoistingId.style.height===''){
hoistingId.style.height = '3rem';
} else {
hoistingId.style.height = '';
}
}
hoistingId.addEventListener('click', enlargeBlogItem)
You can use overflow: hidden; on the parent element to ensure that the child elements are inside the parent and not overlapping and then use a JavaScript function to handle the size changes. Attribute attr-small is used to store the original value of height. By removing the height attribute from the style of the parent it will default to wrapping the children.
function toggleSize(el){
const originalSize = el.getAttribute('attr-small');
if(el.style.height === originalSize) {
el.style.removeProperty('height');
} else {
el.style.height = originalSize;
}
}
#container {
border: 1px solid;
width: 200px;
overflow: hidden;
}
#container:hover {
cursor: pointer;
}
.foo {
width: 90px;
height: 90px;
background-color: red;
display: inline-block;
margin-left: 5px;
margin-top: 5px;
}
<div id='container' onclick='toggleSize(this)' attr-small='48px' style='height:48px;'>
<div class='foo'></div>
<div class='foo'></div>
<div class='foo'></div>
<div class='foo'></div>
<div class='foo'></div>
<div class='foo'></div>
</div>
I have a div with height = 10*screen-height.
I want to add another smaller div to it with height = screen height
Assuming that I can add 10 such smaller div's onto the bigger div, I want to add this div at particular position on the bigger div. Say starting from 4*screenheight pixel. How do I do that using jQuery?
Presumably you already have the screen height stored, and the two divs created at the correct heights, so:
$(inner_div).css('position', 'relative').css('top', 4*screen_height);
You may not need position:relative in your style if it's in your css already
See here how you can access and manipulate the body's height and the big div's inners afterwards;
JSfiddle
HTML
<div id="biggy">
<div class="smally">Smally :)</div>
<div class="smally">Smally 2, don't forget me :D</div>
</div>
CSS
html, body {
height: 100%;
padding: 0px;
margin: 0px;
}
#biggy {
width: 200px;
background-color: orange;
position: relative;
}
.smally {
width: 100%;
background-color: blue;
color: white;
text-align: center;
position: absolute;
}
JavaScript
$(document).ready(function() {
var bh = $('body').height();
var smally_offset = (bh / 10);
// Set biggy to be the body's height
$('#biggy').css('height', bh);
// Make all smallies 10% of the set height
$('.smally').css('height', smally_offset);
// Handle the different smallies :)
$('.smally:nth-child(1)').css('top', smally_offset * 0);
$('.smally:nth-child(2)').css('top', smally_offset * 1);
});
I'm adding elements into a container div whose height is 'auto' initially. I expect its height will be updated as the children elements appended. But, actually not. Could someone help me? I just want the container div height gets updated according to the children's height.
I used chrome debuging tool, the height of container div is less than height of children divs. Children divs are float:left.
If you're adding floated children to a div you need to have overflow:auto; on the parent.
You can also use another element to clear the float clear:both will do this.
This is because floated elements are taken out of the document flow.
Here's an example that shows you a few techniques you can use : http://jsfiddle.net/Tn5c3/
The CSS
#a, #b {
padding: 10px;
margin:10xp
}
#a {
background: #aa0000;
}
#b {
background: #00aa00;
overflow: auto;
}
p {
background: #0000aa;
padding: 5px;
}
.clear {
clear:both;
height: 50px;
}
The JS
$('#bb').click(function() {
addChild($('#b'));
});
$('#ba').click(function() {
addChild($('#a'));
});
function addChild(parent) {
var child = $('<p>floated para</p>').css({
'float': 'left'
});
parent.append(child);
}
The HTML
<button id='ba'>Add to A</button>
<button id='bb'>Add to B</button>
<div id='a'></div>
<div class='clear'></div>
<div id='b'></div>
I have a element, which is absolute positioned and has a fixed height.
This element has a lot of child elements, which could change their contents, and in consequence their height.
The problem is that the container element doesn't auto expand to fit its children (because of it's fixed height and absolute position).
How can I can resize the main container to match its children height?
Assuming you can change the css, this can be done fairly simply in css. Instead of setting height simply set min-height and your element should expand thusly.
min-height
Optionally if you did want to/need to do it in jQuery something like the following would work:
html:
<div id='container'>
<div class='child'>Content</div>
<div class='child'>Content</div>
<div class='child'>Content</div>
<div class='child'>Content</div>
</div>
CSS:
.child{
height: 40px;
background-color: red;
}
#container{
height: 120px;
background-color: gray;
padding: 5px;
}
javascript:
var childHeight = 0
$('.child').each( function() {
childHeight = childHeight + $(this).height();
})
$('#container').height(childHeight);
Working example:
http://jsfiddle.net/EcZZL/1/
I have a container element which I need to resize as its contents change. It contains 2 absolutely positioned divs which can both change height. If I don't specify the height of the container then anything after the container disappears under the contents.
At the moment I am doing the following but I'd be pleased to find a less laborious alternative:
(container has position:relative, #main and #sidebar are position:absolute, the contents of #sidebar have no positioning specified)
css:
div#mapcontainer { position:relative; width:100%; height: 600px; }
div#main { position:absolute; top: 0; left: 10px; width: 500px; height: 400px; }
div#sidebar { position:absolute; top:10px; right:10px; width: 155px; height: 405px;}
html:
<div id="container">
<div id="main">variable height content here</div>
<div id="sidebar">
<div id="foo">...</div>
<div id="bar">....</div>
...
</div>
<div>
js:
fixHeights = function() {
var children_height = 0;
$('#sidebar'). children().each(function(){children_height += $(this).height();});
$('#container').height(Math.max(children_height, $('#main').height()));
};
This is a very odd question, as div's height is always the height of its children.
Are you floating content in your container div? When you float child content the containing div doesn't act the same anymore.
If you're floating content that extends past the bottom of the container div, add the following div to the very bottom of the children of the container div:
<div style="clear:both;"></div>
That will not allow children to float over it, thus forcing the containing div to be the height of its tallest child...
<div id="container">
<div id="dynamic" style="float:left;width:100px;">dynamic content goes here</div>
<div id="static" style="margin-left:104px;">Lots of static stuff here</div>
<div style="clear:both;"></div>
</div>
Okay, I'm not sure why you're doing the positioning the way you are, but I've done something similar for a website that had to look like a desktop application. I don't believe there is any way to do this other than with javascript. Html documents are designed to flow, not be rigid. If you want to bail on the javascript, you'll have to let go of the positioning styles and use your floating and clearing divs. Its not that horrible...
if you're floating the container div "overflow: auto" can also work magically, esp with regard to the whole IE hasLayout debacle
You didn't specify but I think you are having a problem with floating elements and you want the container they are in to be at least the size of the biggest floating element. You should try the following CSS hack that forces the browser to rerender the size of the container element to the size of the floating elements:
#wrapper:after {
clear:both;
content:".";
display:block;
height:0;
visibility:hidden;
}
Let me know what you come up with and if this works. There are many other hacks to try, depending on your browser.
I would try changing the css not to use absolute positioning. In Firefox you would need to use the wrapper trick mention in the comments to get the mapcontainer the right height.
div#mapcontainer { clear:both; width:100%; min-height: 600px; }
div#main { float:left; margin-left: 10px; width: 500px; height: 400px; }
div#sidebar { float:left; margin-top:10px; margin-right:10px; width: 155px; height: 405px;}
Overflow:visible; That's the ticket. overflow:auto will create a scroll bar, if needed.