This question already has answers here:
Align DIV's to bottom or baseline
(11 answers)
Closed 3 years ago.
I'm trying to make a div contain inside another div using absolute however when I add a hundred percent height and width it does it the bodys size rather than 100% height and width of the div that its contained in, therefor I can't position the div at the bottom of the div it's contained in.
Does anybody know a solution for the problem I'm facing here.
.row {
width: 80%;
max-width: 1425px;
margin: 0 auto;
padding: 50px 0px;
display: flex;
}
.column {
flex: 1;
}
.halves {
display: flex;
justify-content: space-between;
}
.halves .column {
width: 50%;
}
.p1 {
height: 600px;
}
.sand {
background-color: #e4c8b8
}
img {
max-width: 100%;
max-height: 100%;
}
.info {
position: absoulute;
width: 100%;
height: 100;
bottom: 10px;
right: 10px
}
<div class="row halves">
<div class="column sand p1">
<img src="https://imgur.com/kgbkNDy.png" />
<div class="info">
<h3>Project one</h3>
</div>
</div>
</div>
Add position: relative; to the element that you want to dictate the sizing.
Related
This question already has answers here:
Why is percentage height not working on my div? [duplicate]
(2 answers)
Closed last month.
I have the following code:
<div class="container">
<div class="left">
<!-- Children expands parent past container height -->
</div>
<div class="right">
</div>
<div>
<style>
.container {
width: 100%;
height: 100%;
display: row;
flex-direction: column;
}
.container .left {
width: 300px;
height: 100%;
overflow-y: auto;
}
.container .right {
flex: 1 1 auto;
height: 100%;
}
</style>
But when I add elements to the .left div, the height expands instead of scroll.
How can I have the .left div to scroll it's content instead of expand in height?
I believe that all you need to do is set a height for .left in px or whatever you prefer. This will lead the div to scroll if the content goes over that set height. I have made the change below
.container .left {
width: 300px;
height: 300px;
overflow-y: auto;
background-color: blue;
}
Or you could also make a set height for your .container which would also force your .left to overflow once it fills up it's space in the container. Shown Below:
.container {
width: 100%;
height: 200px;
display: flex;
flex-direction: column;
}
I hope this helps!
This question already has answers here:
Fill remaining vertical space with CSS using display:flex
(6 answers)
How can I make my flexbox layout take 100% vertical space?
(4 answers)
Closed 9 months ago.
I have a div of height 100%. Inside that div, there are two children: an <a> and another <div>. The child <div> also has a height of 100%. I expected setting the child div's height to 100% would make it fill up the remaining height, not copy the height of the parent element and disregard fellow children leading to unintended overflow.
Example: https://codepen.io/gamepro5/pen/Jjpaqva (why is the child class in this example overflowing it's parent with a height of 100%?)
html {
height: 100%;
}
a {
display: block;
text-align: center;
}
body {
margin:0;
width:100%;
height: 100%;
}
.parent {
width: 75%;
background-color: red;
height: 100%;
}
.child{
height: 100%;
width: 75%;
background-color: green;
/*would need to do a calc of 100% minus whatever the height of the <a> tag is, but that is annoying to do since the height of the other items can change. */
}
.child p {
text-align: center;
}
<html>
<body>
<div class="parent">
<a>Daddy Potato (king of all potatoes):</a>
<div class="child"><p>Potatoe</p><p>Potatoe</p><p>Potato</p><p>Potate</p><p>Ube</p></div>
</div>
</body>
</html>
I simply want the child div to fill up the remaining available space with it's height without overflowing.
You can achieve this with flex: Set display: flex and flex-flow: column; on the parent element, and on the child set flex-grow: 1;
html {
height: 100%;
}
a {
display: block;
text-align: center;
}
body {
margin:0;
width:100%;
height: 100%;
}
.parent {
width: 75%;
background-color: red;
display: flex;
flex-flow: column;
height: 100%;
}
.child{
flex-grow: 1;
width: 75%;
background-color: green;
}
.child p {
text-align: center;
}
<html>
<body>
<div class="parent">
<a>Daddy Potato (king of all potatoes):</a>
<div class="child"><p>Potatoe</p><p>Potatoe</p><p>Potato</p><p>Potate</p><p>Ube</p></div>
</div>
</body>
</html>
This question already has answers here:
CSS fill remaining width
(8 answers)
Percentage Height HTML 5/CSS
(7 answers)
CSS - Equal Height Columns?
(11 answers)
Closed 2 years ago.
How can I achieve the below layout in CSS? It's very simple but its turning out quite complex to code. The red div will contain an image advertisement and will always be 350px wide and always sit on the right side of the page. The green div will contain the website content and its width is dynamic, is should fill the remaining width leftover after the red div is inserted. Both divs should have the same height.
html, body {
width: 100%;
margin: 0 auto;
}
.green-div {
background-color: green;
display: inline-block;
margin: 0 auto;
height: 100%;
}
.red-div {
background-color: red;
display: inline-block;
width: 350px;
height: 100%;
}
<div class="green-div">
<p>Green Div</p>
</div>
<div class="red-div">
<p>Red Div</p>
</div>
You can use flexbox to achieve this.
html, body {
width: 100%;
margin: 0 auto;
display: flex;
height: 100vh;
}
.green-div {
background-color: green;
flex-grow: 1;
margin: 0 auto;
height: 100%;
}
.red-div {
background-color: red;
width: 350px;
height: 100%;
}
<div class="green-div">
<p>Green Div</p>
</div>
<div class="red-div">
<p>Red Div</p>
</div>
I want to center .donut-graphs inside .dashboard horizontally, so the space between the right edge of the sidebar and the left edge of .donut-graphs is the same as the space from the right edge of .donut-graphs and the right edge of the screen. I have managed to do so, but I had to remove position: fixed from .navbar. The problem is, I can't do that because my sidebar has to stay on top of the screen when you scroll up/down, and with position: fixed on .navbar, the graphs aren't centered properly.
HTML:
<div class="container">
<div class="navbar">
</div>
<div class="content">
<div class="dashboard">
<div class="donut-graphs">
<div class="dashboard-income">
Div 1
</div>
<div class="dashboard-overall">
Div 2
</div>
<div class="dashboard-spent">
Div 3
</div>
</div>
</div>
</div>
</div>
CSS:
body {
margin: 0;
}
.container {
display: flex;
align-items: stretch;
max-width: 100%;
min-height: 100vh;
}
.navbar {
background-color: #ddd;
flex: 0 0 230px;
position: fixed;
height: 100vh;
width: 230px;
}
.content {
flex: 1;
overflow-x: auto;
text-align: center;
}
.donut-graphs {
display: inline-flex;
border: 1px solid;
margin: 50px auto 0;
position: relative;
text-align: left;
}
.dashboard-income,
.dashboard-overall,
.dashboard-spent {
height: 256px;
width: 357px;
display: inline-block;
}
.dashboard-income {
background-color: green;
}
.dashboard-overall {
background-color: blue;
}
.dashboard-spent {
background-color: red;
}
How can I overcome the issue?
Demo
position: fixed puts element above everything. That element won't attach to any element in body because it is the way that works. It only becomes dependent of viewport
What you want to achive could be done with position: absolute but parent (whose child you want to center) has to be position: relative for this to work.
Read more about positioning elements in css here
.content { padding-left:230px; }
Should do the trick.
Assigning your navbar a fixed position takes it out of the document flow, so when centering your donut graphs the browser doesn't take the navbar into account.
Giving the .content element a padding equivalent to the width of the navbar makes up for this.
The only problem with this approach is that if .navbar changes dimensions, you'll need to change the padding on .content to match.
This question already has answers here:
Chrome / Safari not filling 100% height of flex parent
(5 answers)
Closed 6 years ago.
I've got a delicate problem for any CSS guru out there.
My green div has a flexible height, taking up the remaining.
And now I want to put a div inside that div which should be the half of the green div. But it seems like if Chrome treats it like half of the whole page rather than the flex item.
http://jsfiddle.net/unh5rw9t/1/
HTML
<body>
<div id="wrapper">
<div id="menu">
1
</div>
<div id="content">2
<div id="half_of_content">2.1</div>
</div>
<div id="footer" style="">
3
</div>
</div>
</body>
CSS
html,body {
height: 100%;
margin: 0;
}
#wrapper {
display: flex;
flex-flow: column;
height: 100%;
}
#menu {
height: 70px;
background-color: purple
}
#content {
flex: 1;
height: 100%;
background-color: green;
}
#half_of_content {
height: 50%;
background-color: yellow;
}
#footer {
height: 100px;
background-color: cyan
}
#Michael_B explained why Chrome behaves like this:
You gave the body a height: 100%. Then gave its child (.wrapper)
a height: 100%. Then gave its child (.content) a height: 100%.
So they're all equal height. Giving the next child (#half_of_content) a height: 50% would naturally be a 50% height
of body.
However, Firefox disagrees because, in fact, that height: 100% of .content is ignored and its height is calculated according to flex: 1.
That is, Chrome resolves the percentage with respect to the value of parent's height property. Firefox does it with respect to the resolved flexible height of the parent.
The right behavior is the Firefox's one. According to Definite and Indefinite Sizes,
If a percentage is going to be resolved against a flex item’s
main size, and the flex item has a definite flex
basis, and the flex container has a definite main
size, the flex item’s main size must be treated as
definite for the purpose of resolving the percentage, and the
percentage must resolve against the flexed main size of the
flex item (that is, after the layout algorithm below has been
completed for the flex item’s flex container, and the flex
item has acquired its final size).
Here is a workaround for Chrome:
#content {
display: flex;
flex-direction: column;
}
#content::after {
content: '';
flex: 1;
}
#half_of_content {
flex: 1;
height: auto;
}
This way the available space in #content will be distributed equally among #half_of_content and the ::after pseudo-element.
Assuming #content doesn't have other content, #half_of_content will be 50%. In your example you have a 2 in there, so it will be a bit less that 50%.
html,
body {
height: 100%;
margin: 0;
}
#wrapper {
display: flex;
flex-flow: column;
height: 100%;
}
#menu {
height: 70px;
background-color: purple
}
#content {
flex: 1;
height: 100%;
background-color: green;
display: flex;
flex-direction: column;
}
#content::after {
content: '';
flex: 1;
}
#half_of_content {
flex: 1;
background-color: yellow;
}
#footer {
height: 100px;
background-color: cyan
}
<div id="wrapper">
<div id="menu">
1
</div>
<div id="content">2
<div id="half_of_content">2.1</div>
</div>
<div id="footer" style="">
3
</div>
</div>
You could absolutely position div id="half_of_content".
#content {
flex: 1;
height: 100%;
background-color: green;
position: relative; /* new */
}
#half_of_content {
height: 50%;
background-color: yellow;
position: absolute; /* new */
width: 100%; /* new */
}
DEMO
With regard to your statement:
But it seems like if Chrome treats it like half of the whole page
rather than the flex item.
You gave the body a height: 100%. Then gave its child (.wrapper) a height: 100%. Then gave its child (.content) a height: 100%. So they're all equal height. Giving the next child (#half_of_content) a height: 50% would naturally be 50% height of body.
With absolute positioning, however, you don't need to specify parent heights.
Nesting flexboxes is a little buggy. I reworked your markup a little by adding an inner wrapper with display: flex; which seems to do the job. Here is the fiddle (also using class names instead of ids).
<div class="content">
<div class="wrapper-inner">
2
<div class="half">
2.1
</div>
</div>
</div>
.wrapper-inner {
position: absolute;
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
}
Fix:
on #content set
display: flex;
flex-flow: column nowrap;
justify-content: flex-end
on #half_of_content set flex: 0 0 50%;
Caveat: you need to add an extra div as a child of #content.
Here's the full example:
html,body {
height: 100%;
margin: 0;
}
#wrapper {
display: flex;
flex-flow: column;
height: 100%;
}
#menu {
height: 70px;
background-color: purple
}
#content {
flex: 1;
height: 100%;
display:flex;
flex-flow: column nowrap;
justify-content: flex-end;
background-color: green;
}
#half_of_content {
flex: 0 0 50%;
background-color: yellow;
}
#footer {
height: 100px;
background-color: cyan
}
<body>
<div id="wrapper">
<div id="menu">
1
</div>
<div id="content">2
<div id="half_of_content">2.1</div>
</div>
<div id="footer" style="">
3
</div>
</div>
</body>