This question already has answers here:
Rotated elements in CSS that affect their parent's height correctly
(7 answers)
Closed 4 years ago.
Below I have two divs, one that grows to assume its child's height, and the other where, because of a css transform, the parent's height does not adjust. Does anyone know why the second div's height doesn't adjust, and if there is a solution to this problem that doesn't involve changing the height of the parent with javascript?
.container {
background-color: blue;
position: relative;
margin-bottom: 200px;
}
.child {
background-color: red;
width:500px;
height:100px;
position: relative;
left: 30%;
}
.b > .child {
transform: rotate(-90deg);
}
Container's height grows to fit child element:
<div class="container a">
<div class="child"></div>
</div>
Container's height does not adjust to fit rotated element:
<div class="container b">
<div class="child"></div>
</div>
You changed with the rotate child element. And height and width will behavior different.
Could you try this code, maybe it will help.
.b > .child { transform: rotate(-90deg); width: 100px; }
Related
This question already has answers here:
Maintain the aspect ratio of a div with CSS
(37 answers)
Closed 1 year ago.
Does anyone have any idea how I can get a proportional scaling, both in width and height?
I have a DIV container with the following setting:
<style>
#container {
width: 100%;
height:calc(100vw * 1.72);
background:red;
}
</style>
<div id="container"></div>
When I adjust the width of the browser window, the area scales. However, no scaling takes place when I adjust the height of the browser window.
Is there a simple CSS solution to this?
try aspect ratio
width:100%;
aspect-ratio:1;
Please keep in mind that aspect-ratio does not work with all the browsers. Visit Mozilla description about aspect ratio to see the supported browsers
You can proportionally scale an element by giving its child element a padding-top percentage value at the ratio you want. The example below has an element with a height that's 2x its parent's width.
More details on the technique here.
.container {
width: 20%; /* pick whatever width you want */
background-color:red;
}
.container .outer {
width: 100%;
padding-top: 200%; /* defines aspect ratio */
position: relative;
}
.container .outer .inner {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
<div class="container">
<div class="outer">
<div class="inner">Your content</div>
</div>
</div>
This question already has answers here:
Make a div fill the height of the remaining screen space
(41 answers)
Closed 8 years ago.
I'm trying to make page with normal div #header and scrollable div #content, so my #content fill all the height left from the #header, even if #header changes his own height.
I tried several options and that is this is my last one http://jsfiddle.net/C4wEg/. But the flaw of this option is that I need to change top property of #content (utilize JavaScript) if height of the #header changes.
Is there any solution to achive my goals only with css?
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
position: relative;
}
#header {
background-color: tan;
}
#content {
overflow: auto;
background-color: teal;
position: absolute;
bottom: 0;
top: 20px;
}
<div id="header">
Test header
</div>
<div id="content">
Test content
</div>
Since css ignores the dimensions of absolute/fixed objects (those are out-of-flow as far as their neighbours are concerned), you can use media queries to emulate dynamic height behaviour:
#media only screen and ( max-width: 700px ) {
#header {
height: 40px;
}
#content {
padding-top: 40px;
}
}
http://jsfiddle.net/2RTFW/ (resize the width of display area to see the effect).
If you are using SASS, then you can easily generate such media queries, even in 10px increments, if you wish (use "for" loop).
So if I want to have two divs, each of 100% of the entire page, side by side, given that the wrapper has overflow:hidden, how should I go about implementing it?
I have tried using inline-block but it did not work.
I have tried using float too but it caused errors.
I want the second div to be hidden so I can change it's left as an animation, sort of like a slide.
Thanks in advance!
If I've understood you correctly, you can achieve what you're after using inline-block. You just have to be a little careful with white space (i.e. you need to make sure you've got no white space between the two child div elements). I've stopped the divs from wrapping by setting white-space: nowrap;.
<div class="foo">
<div> woo woo !</div><div> woo woo !</div>
</div>
.foo {
overflow: hidden;
white-space: nowrap;
}
.foo > div {
display: inline-block;
vertical-align: top;
width: 100%;
background: aqua;
}
.foo > div + div {
background: lime;
}
Try it out at http://jsfiddle.net/8Q3pS/2/.
Edit: Here's an alternative implementation using position: absolute;: http://jsfiddle.net/8Q3pS/5/. That way you'll be able to animate the second one into view using left. Note that you'll need to set a height on the parent div.
.foo {
position: relative;
width: 100%;
height: 1.5em;
overflow: hidden;
}
.foo > div {
position: absolute;
top: 0;
left: 0;
width: 100%;
background: aqua;
}
.foo > div + div {
left: 100%;
background: lime;
}
This should be purely a matter of positioning one of the divs off the page using absolute positioning and transitioning the left property using either hover state or javascript.
Hover the red div.
Codepen Example
Could you not set max-width to 100%, not set the actual width and float them side by side? With both overflow:hidden, as they expand it should create horizontal scrollbars.
I am trying to make a light box style Jquery function. Unfortunately, the .container div that contains the image div (.lightboxbackground) I want to make pop out and enlarge has position:absolute and z-index: 10 so my pop up box and background fader only take up the width and height of that parent (.container) div eg:
Would anyone know a way around this so that my .lightboxbackground and .lightbox divs can cover the whole screen?
<div class='container'>
<div class='lightboxbackground'>
<div class='lightbox'>
<img src='image.jpg'/>
</div>
</div>
</div>
.container {
position: absolute;
z-index:10;
width: 200px;
height: 200px;
}
.lightboxbackground {
background-color:#000;
opacity: 0.9;
width: 100%;
height: 100%;
position:absolute;
z-index: 11;
}
.lightbox {
width: 500px;
height: 500px;
position:absolute;
z-index: 12;
}
if you want to cover the whole screen:
.lightboxbackground {
background-color:#000;
opacity: 0.9;
width: 100%;
height: 100%;
position:fixed;
left:0;
top:0;
z-index: 11; //I would advise to change this to z-index:1000 (Note: .lightbox must also adjust to this)
}
fid: http://jsfiddle.net/uH4MF/1/
.container is their "frame of reference", so to speak. 100% width and height of the descendants of .container means 200px for them.
Also, there is a way to attain 100% height. One of them is to to explicitly define height on html and body so you can have this reference.
And so:
Place .container as a child of body
<body>
<div class="container">...
Remove .container's width and height
Add the following style:
html, body, .container {height:100%};
I am using this system to try to implement a sliding window selector.
I have a <div> that is contained in another <div>. The outer <div> has a fixed size and the inner one should expand to contain its contents.
<div style="width: 25px; overflow: hidden">
<div id="middle">
<div style="width: 50px"></div>
</div>
</div>
The outer <div> has a fixed size.
The middle <div> should expand to match the size of the inner <div> (the one that has width 50px)
How, using CSS or JavaScript can I ensure that the middle <div> is as wide as the inner <div>, but still gets cut off by the outer <div>?
I have tried to use JQuery to get the length of the inner <div> and then dynamically set the width of the middle <div>, but this does not consistently get the right length.
Div elements, by default, try to fit their container. so the middle one will try to fit its container which is the outer div.. it is not affected by content.
If you set the middle one to be display:inline-block you make it fit the contents instead of the container it that fixes the issue..
Can you make inner div float? That way it should display full width of the span but without editing outer div width to expand the content longer than outer div width will be invisible.
divs are block elements, so your inner div will naturally expand to the width of the containing div. You can ensure this by setting the style attribute of the inner div to 100%. You should also set its overflow CSS property to "hidden."
You can get the width of the content of any HTML object like this:
document.getElementById("myDIV").clientWidth
Use display: inline-block and max-width: ?px on middle. You'll want to put overflow-x: hidden on middle (not outer like in your code), but I left it off in the demo so you could see the width working.
Demo: http://jsfiddle.net/ThinkingStiff/hHDQS/
HTML:
<div class="outer">
<div class="middle">
<div id="inner1"></div>
</div>
</div>
<div class="outer">
<div class="middle">
<div id="inner2"></div>
</div>
</div>
CSS:
.outer {
border: 1px solid green;
height: 100px;
width: 300px;
}
.middle {
border: 1px solid red;
display: inline-block;
height: 75px;
max-width: 300px;
}
#inner1 {
border: 1px solid blue;
height: 50px;
width: 50px;
}
#inner2 {
border: 1px solid blue;
height: 50px;
width: 350px;
}
Output:
If the inner div can be absolutely positioned the following will stretch it to fill up the parent completely (width and height):
#myInner{
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
width:auto;
height:auto;
}