I have a home-component which displays an aside-component and a div.
Those two should be displayed next to each other with the same height.
(The div inside the home-component shoud match the height of the div inside the aside-component)
I got a working solution attached where i used a "display: contents" on the app-aside tag. This is not a usable solution, since its not supported by Edge.
https://stackblitz.com/edit/angular-vkgwsb
i also tried "display:table" and "display: table-cell" which is also not working.
app.component.html
<div class="wrapper">
<div class="container">
<div class="content"></div>
<app-aside></app-aside>
</div>
</div>
app.component.css
.wrapper {
width: 1200px;
margin: 0 auto;
}
.container {
display: flex;
width: 100%;
}
.content {
min-height: 500px;
width: 840px;
}
aside.component.html
<div class="sidebar"></div>
aside.component.css
.sidebar {
min-height: 200px;
width: 360px;
}
Both Divs (content and sidebar) should have the same height.
Your aside element has the same height as your .content div, because of the display: flex on the container. The problem is the sidebar div inside the app-aside component. Remove the .sidebar div (and style the app-aside using the :host {} selector in the css) OR add height: 100% to the .sidebar div.
Related
I have an image in a flex container (let's call it child).
The container itself has flex: 1 because it also belongs to a flex parent with flex-direction: column and child behaves as expected (takes 100% height of parent) before introducing the image situation.
On adding an image to child, the image extends child to accommodate its height, effectively child pushing parent.
Using object-fit: cover on the image could not help in this situation!
Looks like this is normal behaviour in Chrome, Firefox, and Safari.
Here's the weird part tho: adding a height property to child fixes the issue on Chrome and Safari but not Firefox. This height's value doesn't matter much as long as it's not greater than the computed height of child - child is contained to 100% height of parent together with the image - even if the height value of child is set to 1px. Surprisingly height: 100% on child doesn't produce the same behaviour.
Any ideas around this will be much appreciated. My goal is to make the image always take up 100% of child - regardless of the width of the viewport.
Here's some code for illustration
#parent {
height: 100vh;
display: flex;
flex-direction: column;
}
#child {
flex: 1;
height: 1px;
/* the weird hack for chrome and safari - ff ignores it */
}
#child img {
width: 100%;
height: 100%;
object-fit: cover;
}
<div id="parent">
<div id="child">
<img src="https://i.picsum.photos/id/1005/400/1000.jpg" />
</div>
</div>
I also added some images for more context. These are crops of the entire page. The first image is from a smaller viewport (width shared with devtools) and the second from the entire page (devtools hidden). The second image shows that the image has extended child to eventually push the container with a green background beyond the fold - causing a scrollbar to appear.
child is the image wrapper, and parent is the component with a white background and some padding. You realize parent has a sibling (green background) and their parent (container with a green border and border radius) has a display: grid and grid-template-rows: 1fr auto;.
It should also be noted that the most top-level element has a height of 100vh and all its children are rendered within that. Essentially there should not be a scrollbar.
I hope you get the idea.
Is this what you are looking to do?
You can also see it here: https://codepen.io/teanbiscuits/pen/GRJmPgo
#parent {
height: 100vh;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr auto;
border:2px solid green;
border-radius:20px;
overflow:hidden;
}
#child {
position:relative;
}
#child img {
position:absolute;
width: 100%;
height: 100%;
object-fit: contain;
}
#text {
background-color:green;
}
<div id="parent">
<div id="child">
<img src="https://i.picsum.photos/id/1005/400/1000.jpg" />
</div>
<div id="text">
<h2>some title here</h2>
<p>Some description here</p>
</div>
</div>
Please try this. Just select preferred object-fit.
html, body{
height: 100%;
margin: 0;
padding: 0;
}
#parent {
height: calc(100vh - 20px);
display: flex;
padding: 10px;
flex-direction: column;
}
#child {
flex: 1;
text-align: center;
overflow: hidden;
}
#child img {
width: 100%;
height: 100%;
object-fit: contain;
}
<div id="parent">
<div id="child">
<img src="https://i.picsum.photos/id/1005/400/1000.jpg" />
</div>
<div id="text">
<h2>Some title here</h2>
<p>Some description here</p>
</div>
</div>
I have a div with an image inside.
The div has a fixed height, lower than the image intrinsic height.
I want the div's width to be always equal to the "displayed" width of the image (which is a function of the unknown div's height and image's height/width ratio).
Here is a codepen example of what I want to do (having "shrink" and "other" divs the same width than their child image)
<div class="container">
<div class="shrink">
<img src="https://dummyimage.com/600x400/0f0/fff" />
</div>
<div class="other">
<img src="https://dummyimage.com/600x400/00f/fff" />
</div>
</div>
div { margin: 5px; }
img { max-height: 100%; }
.container {
background-color: red;
display: flex;
flex-flow: row nowrap;
width: 800px;
height: 100px;
overflow: hidden;
}
.shrink {
flex: 0 1 auto;
background-color: #88FF88;
}
.other {
flex: 0 1 auto;
background-color: #8888FF;
}
Is it possible with only HTML/CSS ie without Javascript ?
Thanks in advance.
Remove width as an attribute of your container and the div will conform to the width of its contents.
Does this work for you?
I'm trying to create a page with a fixed div above the main div. The main div should be below the fixed div but instead it overlaps the fixed div.
Adding margin-top positions the main div below the fixed div but, it also clips the same amount off of the bottom of the page.
What am I doing wrong?
Live Demo
body {
background-color: #00FFFF;
}
.fixed {
width: 100%;
position: fixed;
background-color: #C0C0C0;
}
.main {
background-color: #FFFFFF;
}
.expand {
height: 800px;
}
<div class="fixed">
fixed div line 1<br />
fixed div line 2<br />
fixed div line 3<br />
</div>
<div class="main">
<div class="expand"></div> <!-- For demo purposes only -->
</div>
To achieve the effect that you're looking for, you can use a combination of display: table on a parent and display: table-row on each of the direct descendants.
Set height: 100% on html, body, .wrap, .main, .inner.
Wrap the current "parents" in a div with class .wrap
Set display: table and width: 100% on .wrap.
Set display: table-row on .fixed, .main
Wrap the text content of .main in a div with class .inner
Set overflow: auto on .inner
This way, no matter what the size of the top div is, the .main will always be underneath .fixed.
display: table is supported by IE > 7 and all other modern browsers.
html, body, .wrap, .main, .inner {
height: 100%;
margin: 0;
}
.wrap {
box-sizing: border-box; /* Include border width in sizing */
border: 8px solid #00FFFF; /* Use a border instead of relying on margins */
display: table;
width: 100%;
}
.fixed, .main {
display: table-row;
}
.inner {
overflow: auto;
}
.expand { height: 800px; }
.fixed { background-color: #C0C0C0; }
<div class="wrap">
<div class="fixed">
fixed div line 1<br />
fixed div line 2<br />
fixed div line 3<br />
</div>
<div class="main">
<div class="inner">
<div class="expand"></div> <!-- For demo purposes only -->
</div>
</div>
</div>
You just need to add margin-top to the main div that is equal to the height of the fixed div. For example, if you have a 24px tall fixed div:
#fixed-div {
position: fixed;
height: 24px;
}
#main-div {
margin-top: 24px;
}
Try adding "position: relative" on the top div.
<div style="width: 100%; opacity: .6; position: fixed; margin-left: auto; margin-right: auto; background-color: #C0C0C0; position: relative;">
fixed div line 1<br />
fixed div line 2<br />
fixed div line 3<br />
</div>
You need a top margin on you main div with a value greater then your fixed divs height So if your fixed div is 60px high Make a margin-top:62px for the main div also you could get rid of margin-left and right and do all margins like this margin:60px auto; if the 60px is no good for you on the bottom of the main div you could do margin:60px auto 0px auto;
Hope this helps
--Joshua Joseph Bissot
Have good answer, curtsey of Joshua K.
I'll define a class named no-js (can be any class name) which sets position of 'fixed' div to relative. That will put the "fixed" div above the main div - though not actually fixed in place. Then with JavaScript I set the div to position: fixed and set the margin-top of the main div to the height of the "fixed" plus a fudge factor of say 5 or 6 px.
That way if JavaScript is enabled, the "fixed" div will actually be fixed and the margin-top of the main div will move it down to show the entire div.
If JavaScript is not enabled, the "fixed" div will still be visible, and above the main div, but it will scroll with the page.
Can I mark an answer as best answer? If so, how?
Stop the presses;
I could just set the position of the "fixed" div to relative (in a CSS class or using stye= on the element) and use JavaScript to change it to fixed and set the margin-top of the main div accordingly. That, I think, removes the need for another class named no-js or such.
I have created another page incorporating the changes needed to accomplish the task. It is at http://thetesting.site/fixeddiv/fixedheader-fixed.html
I am trying to set the width of a div element to the width of it's longest child element, which in this case happens to be a div that I want locked to the bottom of the parent div. I am also not using a fixed height for the parent, because I do not know how big the children will need to be
Here is my html/css:
HTML:
<div id ="header-right">
<div id="content1"></div>
<div id="footer"></div>
</div>
CSS:
#header-right{
background-color: red;
position: relative;
display: inline-block;
height: 300px; /*The actual width is unknown, this is just for example*/
}
#content1{
background-color: blue;
width: 200px;
height: 100px;
}
#footer{
background-color: cyan;
position: absolute;
bottom: 0;
width: 300px; /*Also an unknown value*/
height: 25px;
}
You can have a look at this jfiddle to see what happens:
https://jsfiddle.net/rkdqp9m5/2/
You can see the container div ignores the footer, since it is absolutely positioned.
However, if I do not use absolute positioning for the footer, then I cannot lock the footer to the bottom of the div, as you can see in this jfiddle
https://jsfiddle.net/rkdqp9m5/3/
I want to lock the footer to the bottom of the container, but I also want the parent's width to be based off the footer. I do not want to use tables for this, and I do not wan to used fixed widths or heights, as the container's and the footer's dimensions will be based off of images whose widths I do not know.
Edit: I would also like to keep this strictly in HTML/CSS, if possible
If you're OK with browser requirements of flexbox, you could do:
#header-right {
background-color: red;
padding: 20px 0px 0px 0px;
height: 300px;
display: inline-flex;
flex-direction: column;
justify-content: space-between;
}
#content1 {
background-color: blue;
width: 200px;
height: 100px;
align-self: flex-start;
}
#footer {
background-color: cyan;
width: 300px;
height: 25px;
align-self: flex-end;
}
<div id="header-right">
<div id="content1"></div>
<div id="footer"></div>
</div>
JSFIDDLE DEMO with all the necessary vendor prefixes.
Does this help: Relative parent DIV to inherit the width of absolute child DIV
What it suggests is that you can't use pure CSS, but you can use Javascript to achieve what you're trying to do.
JsFiddle: http://jsfiddle.net/techsin/csfvb91u/
(just realized normal div is collapsing ALSO to size of content, is min height completely useless?)
I need two divs, one left, and on right. Left one is 100px wide and stays that way. While, right div expands infinitely and doesn't shrink beyond 400px. Both Divs should be the height of parent. And parent has no exact height but minimum height of 800. So if content of one of these 2 divs were to push the height of div and extend it. Then The height of parent should increase and thus also the height of other div.
I tried using floats. I managed to some extent. However left side which was on float left, its height kept collapsing and didn't follow height:100% rule. It only worked if parent had definite width.
I tried using inline block but then right div won't expand to fillin the available space..
Why in the world css doesn't have fit-content, fill-available, choose what % refers to, choose what to position against, use vector or use pngs to shape div, inset textshadow, etc.
<div class="cont">
<div class="a"></div>
<div class="b"></div>
</div>
try with display:table and display:table-cell for child you will need to give fixed with for the left div
demo - http://jsfiddle.net/z90fma6e/
html,
body {
height: 100%;
}
* {
margin: 0;
padding: 0;
}
.cont {
display: table;
height: 100%;
}
.left,
.right {
height: 100%;
}
.left {
width: 200px;
background: red;
display: block;
}
.right {
width: 100%;
display: table-cell;
background: green;
}
<div class="cont">
<div class="left">fixed
<br/>height adjusts</div>
<div class="right">expands
<br/>height adjusts</div>
</div>
Sounds like your divs are collapsing. Your going to need a clearfix you can add to divs. There are a few ways to do this; however, this option is best.
.clearfix:after {
content: ".";
visibility: hidden;
display: block;
height: 0;
clear: both;
}
Add this clearfix class and css to your divs so they wont collapse.
You can read more about them at cssTricks
perfect use case for CSS flex layout:
<style>
body {
display: flex;
flex-direction: row;
margin: 0;
padding: 0;
}
div:first-child {
width: 200px;
background: red;
}
div:last-child {
flex: 1;
background: blue;
}
</style>
<div></div>
<div></div>
If you wish to support IE8 or earlier I would suggest you to use positioning:
Here's what I came up with
Fiddle : http://jsfiddle.net/csfvb91u/4/
If the content on the right is going out of the container, you can always use margin-right:200px as the right side container is shifted 200px using left:200px. Hope you get what I'm saying... :)
HTML:
<div class="cont">
<div class="a"></div>
<div class="b"></div>
</div>
CSS:
.a {
position:absolute;
width: 200px;
background-color: green;
height: 100%;
}
.b {
width:100%;
position:absolute;
left:200px;
background-color: blue;
height: 100%;
}
.cont {
position:relative;
border:1px solid #333;
min-height:300px;
overflow:hidden;
}