This question already has answers here:
Percentage Height HTML 5/CSS
(7 answers)
Closed 1 year ago.
I have the following code:
* {
box-sizing: border-box;
}
html,
body {
height: 100%;
padding: 10px;
}
body {
position: relative;
}
#outer {
position: absolute;
top: 0;
left: 0;
border: 2px solid green;
padding: 5px;
max-width: 100%;
max-height: 100%;
}
#inner {
border: 2px solid red;
font-size: 5em;
overflow: auto;
height: 100%;
}
<html>
<body>
<div id="outer">
<div id="inner">
This is a loooooooonnnng<br>text.<br> Spanning
<br>multiple<br>lines.
</div>
</div>
</body>
</html>
Resize the browser window and you can see that the inner div is expanding more than the outer div in height. But, if I specify a height, say height: 1000px; on the outer div, the inner div gets resized to fit outer div's height. Why is it behaving like that? Isn't max-height supposed to work without specifying a height?
The max-height property sets the maximum height of an element. It prevents the used value of the height property from becoming larger than the value specified for max-height.
When you use max-height: 100% on the parent container, the percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly, and this element is not absolutely positioned, the percentage value is treated as none.
In terms of max-height, if the content is larger than the maximum height, it will overflow.
To allow the child container to always fit inside the parent container, you can just use CSS Flexbox or add overflow: auto to #outer so then it does fit 100% of the content within it's content-box. Without using either overflow or Flexbox, the child container's content is larger than the maximum height and therefore overflows out the bottom of #outer when the viewport height is small.
Removing the height: 100% declaration from #inner while making the parent container a Flexbox with display: flex seems to do the trick without having to add overflow: auto to #outer.
* {
box-sizing: border-box;
}
html,
body {
height: 100%;
padding: 10px;
}
body {
position: relative;
}
#outer {
position: absolute;
top: 0;
left: 0;
border: 2px solid green;
padding: 5px;
max-width: 100%;
max-height: 100%;
display: flex;
}
#inner {
border: 2px solid red;
font-size: 5em;
overflow: auto;
}
<html>
<body>
<div id="outer">
<div id="inner">
This is a loooooooonnnng<br>text.<br> Spanning
<br>multiple<br>lines.
</div>
</div>
</body>
</html>
Simply remove the max-height declaration from the #outer div.
To fix your issue, supply a height property to your #outer div.
#outer {
/* ... */
height: 100%;
}
Related
This question already has answers here:
How can I make a div not larger than its contents?
(43 answers)
Closed 11 months ago.
I have a div inside which I have content. I gave width = auto and then gave max-width but the container is taking up a constant fixed no matter what the size of the content is:
.adjustablebox {
background: white;
height: 50px;
width: auto;
overflow: hidden;
padding: 8px;
max-width: 350px;
border-radius: 5px;
position: relative;
top: 0;
left: 30%;
}
.body {
background: black;
}
<div class="body">
<div class="adjustablebox">
<span>Hello world</span>
</div>
</div>
div is an block element. its default behaviour is covering full width so its doing that but as you have given property of max-width so its just expanding to that limit. in order to do your stuff you have to change its behaviour to
display: inline-block;
the .adjustablebox div is block level, it takes the entire available width of the container.
If you want it to be auto width you can do
.adjustablebox {
display: inline-block;
}
or use flex box.
instead of using auto, use 100% and remove max-width.
Also you can remove both tag
.body {
background: black;
}
.adjustablebox {
background: white;
height: 50px;
width: 100%;
overflow: hidden;
padding: 8px;
border-radius: 5px;
position: relative;
top: 0;
left: 30%;
}
<div class="body">
<div class="adjustablebox">
<span>Hello world</span>
</div>
</div>
hope this will solve your problem.
I have a div (div1) inside some other divs. Now I want this div to have the same width as the body (take up full width of display), but always have the same height and position as its parent (div2). I've tried using position: absolute; on this div (div1). Then I can either
set body to position: relative; and have div1 take up 100% width, but now I'm having trouble making the height always follow div2.
or set the parent (div2) to position: relative; and have div 1 take up 100% height, but now I can't make it follow the width of body.
It would be cool if CSS had the option of saying:
.div1 {
height: 100%(.div2);
width: 100%(body);
position: 0(.div2);
}
Or something like that
JSFiddle with the relevant bits: https://jsfiddle.net/Hamleyburger/fqe5o46c/1/#&togetherjs=K02DaSO2nR
What I want is the div ".selectable" to have a div (inside?) that shows on hover and fits the heights of ".selectable" (parent) and the entire width of the body.
Extra, maybe relevant info:
I'm using Bootstrap and (Jinja2) templating. All the divs so far are taking their base widths from a wrapper container (.main) in my base template that I've set to be (responsively) narrower than body. If I were to remove .main
div I would have to set width on many individual divs. That would solve it (I could make all the divs that aren't div1 narrower), but it wouldn't be very DRY. I'm using SASS, if that helps.
It's possible to force a div to fill the whole viewport width using vw. It's a bit weird though:
body,
html {
margin: 0;
padding: 0;
}
.outer {
width: 300px;
height: 300px;
background-color: #eeeeee;
margin: 0 auto;
position: relative
}
.inner {
width: 100vw;
height: 100%;
background-color: rgba(0, 0, 0, 0.1);
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
<div class="outer">
<div class="inner"></div>
</div>
I'd recommend to make your outer div full width and give the inner one a specific width:
body,
html {
margin: 0;
padding: 0;
}
.outer {
width: 100%;
background-color: #eeeeee;
position: relative
}
.inner {
width: 300px;
height: 300px;
margin: 0 auto;
background-color: rgba(0, 0, 0, 0.1);
}
<div class="outer">
<div class="inner"></div>
</div>
This question already has answers here:
Make a div fill the height of the remaining screen space
(41 answers)
Closed 4 years ago.
I have a parent div and two child divs. The second child div is variable height, but is absolutely positioned at the bottom of the parent div.
I want the first div to have a dynamic height based on the second div. I thought margin-bottom: 10px would specify the height of the first div to go up until 10px of the second div, but apparently this is not true.
Is there any workaround to get what I want?
HTML:
<div class="parent">
<div class="first">
Hello
</div>
<div class="second" >
</div>
</div>
CSS:
.parent {
height: 500px;
min-width: 500px;
position: relative;
background-color: red;
}
.first {
background-color: green;
margin-bottom: 10px;
}
.second {
height: 100px;
background-color: grey;
bottom: 0px;
box-sizing: border-box;
position: absolute;
width: 100%;
}
JSFiddle:
https://jsfiddle.net/4tjqsron/2/
The margin-bottom is only telling the browser "don't let anything come within 10px of the bottom of me," as you found out.
I think this may be an excellent opportunity to use the calc() css function!
Try this:
.first {
background-color: green;
height: calc(100% - 110px);
}
This should leave a 10px space between your first and second child element.
Basically it is telling the browser that the first element is to take up 100% of its parent minus 110px.
Please see this for more info on the calc() function.
https://www.w3schools.com/cssref/func_calc.asp
I hope this helps!
EDIT: It just occurred to me that this only works if your height is set elsewhere. You may need to adjust your use of the 100% argument depending on your current parent height settings. Even if this is the case, the calc() function should still prove useful.
I am not get your point very clearly, here is my solution that div.second will always align on the bottom of div.parent vertically:
.parent {
height: 500px;
min-width: 500px;
position: relative;
background-color: red;
}
.first {
background-color: green;
margin-bottom: 10px;
}
.second {
/* height: 100px;
background-color: grey;
bottom: 0px;
box-sizing: border-box;
position: absolute;
width: 100%; */
max-height: 100%;
position: absolute;
top: auto;
bottom: 0;
}
<div class="parent">
<div class="first">
Hello
</div>
<div class="second" >No matter how many content in this div, it will always lie on the bottom of the parent div</div>
</div>
Is there any solution without JS?
html
<div class="wrapper">
<div class="fix"></div>
</div>
css
.wrapper {
max-width: 500px;
border: 1px solid red;
height: 5500px;
position: relative;
}
.fix {
width: inherit;
height: 20px;
position:fixed;
background: black;
}
I cant add any other styles for .wrapper except width: 100%;.
I try with width: inherit but it doesn't work for me because of I have parent div with only max-width. source
Here is JsFiddle Demo
A position:fixed element is not relative to its parent anymore. It respects only the viewport's boudaries.
MDN Definition:
fixed
Do not leave space for the element. Instead, position it at a specified position relative to the screen's viewport and don't move it when scrolled.
So any width, max-width, or whatever property will not be respected by the fixed element.
EDIT
In fact, it won't inherit the width because there's no width property defined on the wrapper.. So, try setting the child as width: 100% and inherit the max-width:
http://jsfiddle.net/mx6anLuu/2/
.wrapper {
max-width: 500px;
border: 1px solid red;
height: 5500px;
position: relative;
}
.fix {
max-width: inherit;
width: 100%;
height: 20px;
position:fixed;
background: black;
}
there is already a width on the column, just set the width of the fixed element to inherit. no reason to complicate things.
CSS:
.col-sm-3 { width: 25%; }
.fixed-in-col { width: inherit; ... }
HTML:
<div class="col-sm-3">
<div class="fixed-in-div">
...
</div>
</div>
It seems there is no solution without JS.
This blog post by Felipe Tadeo explains why:
https://dev.to/phillt/inherit-the-width-of-the-parent-element-when-position-fixed-is-applied
It explains the confusion around width: inherit
"Fixed positions itself relative to the viewport... whenever you inherit width (with position fixed) it will be with respect to the viewport"
How can I have a div with 100% height that has a particular aspect ratio, e.g. 2:3?
For example, if the outer element has a height of 900px, the width of the inner element should be 600px, but this should be responsive.
I don't want to use any JavaScript for this.
Using the CSS3 flexible box model would be fine.
If you are targeting modern browsers that support CSS3, you can try the following.
Consider the following HTML snippet:
<div class="wrapper">
<div class="inner">Inner content...</div>
</div>
and apply the following CSS rules:
html, body {
height: 100%;
}
body {
margin: 0;
}
.wrapper {
background-color: lightblue;
height: 100%;
}
.wrapper .inner {
margin: 0 auto;
background-color: beige;
height: 100%;
width: 66.6666666666vh;
}
The .wrapper element takes up 100% of the view port height because I have set
height: 100% on the body and html elements.
The inner wrapper .inner has a height: 100% and fills up the parent block.
To set the .inner width, use the viewport-percentage length vh that scales with the height of the parent block.
In this example, 66.66vh means 66.66% of the vertical height, which corresponds to a 2:3 aspect ratio (width:height).
See demo at jsFiddle
Reference: http://www.w3.org/TR/css3-values/#viewport-relative-lengths
Browser Compatibility
The vh unit and other vertical percentage lengths have pretty good support with the latest browsers, see the reference below for more details.
See reference:
https://developer.mozilla.org/en-US/docs/Web/CSS/length#Browser_compatibility
Alternative Approach Using a Spacer Image
Consider the following HTML:
<div class="ratio-wrapper">
<img class="spacer" src="http://placehold.it/20x30">
<div class="content">Some content...</div>
</div>
and apply the following CSS:
.ratio-wrapper {
position: relative;
display: inline-block;
border: 1px solid gray;
height: 500px; /* set the height or inherit from the parent container */
}
.ratio-wrapper .spacer {
height: 100%; /* set height: 100% for portrait style content */
visibility: hidden;
vertical-align: top;
}
.ratio-wrapper .content {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
padding: 20px;
}
The .ratio-wrapper container has two child elements, an img.spacer and div.content.
The image as a portrait aspect ratio, for example, 20x30 (wxh) and is set to expand to fill the height of the parent container using height: 100%. The image is hidden from view but retains its space in the parent block.
The .content element is positioned absolutely to fill the parent container and can contain any content. Because .content is constrained in height and width, the content could overflow in some cases, so setting overflow: auto may be appropriate.
See demo at: http://jsfiddle.net/audetwebdesign/BVkuW/
Related question and answer:
In Fluid Container, Can I Make Elements as Tall as they Are Wide?
You can do this by sticking a 2px by 3px image and an inner div as siblings into an outer div which has display: inline-block; applied. Now when you set the image to have a height of 100%, and you absolutely position the inner div to be as high and wide as its ancestor, you can set the height of the outer div, and the width of all elements involved will be exactly equal and based on the aspect ratio of the image.
Here's a jsFiddle demonstrating this approach.
HTML
<div>
<div>2 by 3</div>
<img src=".../twobythree.png" />
</div>
CSS
body > div {
height: 300px;
position: relative;
display: inline-block;
}
img {
display: block;
height: 100%;
}
div > div {
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
}