<img
style={{ width: "100%", height: "auto" }}
src={require("./the-mandalorian.jpg")}
alt="cat"
/><div style={{ height: "20px", background: "brown" }}></div>
try this? hope it helps
Solution 1 :
Solution 2 :
The problem is inside <Allotment.Pane> tag.
In your second <div> element inside <Allotment.Pane> change the style height: "100%" to height: "auto"
You don’t see the brown div element because your images parent div element is using the whole column with the height of 100%. So the below HTML element has been pushed out.
If you add border: '1px solid white' to the images parent container you will see what I mean.
Try this
<Allotment>
<Allotment.Pane>
<div style={{ height: "40px", background: "brown" }}></div>
<div
style={{
display: "flex",
height: "85%",
flexDirection: "column",
justifyContent: "space-between",
border: "1px solid white"
}}
>
<div>
<img
style={{ width: "100%", height: "auto" }}
src={require("./the-mandalorian.jpg")}
alt="cat"
/>
</div>
</div>
<div
style={{
height: "15%",
background: "brown",
border: "1px solid white"
}}
></div>
</Allotment.Pane>
<Allotment.Pane>
<div style={{ height: "40px", background: "brown" }}></div>
<div
style={{
display: "flex",
height: "85%",
flexDirection: "column",
justifyContent: "space-between",
border: "1px solid white"
}}
>
<div>
<img
style={{ width: "100%", height: "auto" }}
src={require("./nature.jpg")}
alt="cat"
/>
</div>
</div>
<div style={{ height: "15%", background: "brown" }}></div>
</Allotment.Pane>
</Allotment>
Solution 3 :
Hi so i made a few little correction, look for ***********HERE
try playing with the sizes of your containers. remember that Bottom
and Right go on forever. So I you use 100% of height and there is no bottom
import React from "react";
import { Allotment } from "allotment";
import "./styles.css";
import "allotment/dist/style.css";
export default function App() {
return (
<div className="App">
<div style={{ background: "blue", minHeight: "42px" }}>Monitor</div>
<div style={{ display: "flex", height: "100%", background: "darkblue" }}>
<div
style={{
border: "1px solid orange",
width: "100px",
height: "100%",
background: "gray"
}}
>
side content
</div>
<div style={{ width: "100%", height: "100%" }}>
<div
style={{
width: "100%",
height: "100vh",// ***********HERE
background: "red",
border: "3px solid yellow"
}}
>
<Allotment>
<Allotment.Pane>
<div style={{ height: "40px", background: "brown" }}></div>
<div
style={{
display: "flex",
height: "50vh", // ************HERE
flexDirection: "column",
justifyContent: "space-between",
}}
>
<div>
<img
style={{ width: "100%", height: "auto" }}
src={require("./the-mandalorian.jpg")}
alt="cat"
/>
</div>
<div style={{ height: "20px", background: "brown" }}></div>
</div>
</Allotment.Pane>
<Allotment.Pane>
<div style={{ height: "40px", background: "brown" }}></div>
<div
style={{
display: "flex",
height: "50vh", // *********************HERE
flexDirection: "column",
justifyContent: "space-between"
}}
>
<div>
<img
style={{ width: "100%", height: "auto" }}
src={require("./nature.jpg")}
alt="cat"
/>
</div>
<div style={{ height: "20px", background: "brown" }}></div>
</div>
</Allotment.Pane>
</Allotment>
</div>{" "}
</div>
</div>
</div>
);
}
Problem :
I’m learning React by coding, here i have two different images and under those should be div with 20px height and brown background color, and as you can see i have put height :”100%” and justifyContent: “space-between” so now i should be able to see that div under images, why it isnt showing ?
ttry it here:
https://codesandbox.io/s/amazing-http-6bdt88?file=/src/App.js
code:
import React from "react";
import { Allotment } from "allotment";
import "./styles.css";
import "allotment/dist/style.css";
export default function App() {
return (
<div className="App">
<div style={{ background: "blue", minHeight: "42px" }}>Monitor</div>
<div style={{ display: "flex", height: "100%", background: "darkblue" }}>
<div
style={{
border: "1px solid orange",
width: "100px",
height: "100%",
background: "gray"
}}
>
side content
</div>
<div style={{ width: "100%", height: "100%" }}>
<div
style={{
width: "100%",
height: "100%",
background: "red",
border: "3px solid yellow"
}}
>
<Allotment>
<Allotment.Pane>
<div style={{ height: "40px", background: "brown" }}></div>
<div
style={{
display: "flex",
height: "100%",
flexDirection: "column",
justifyContent: "space-between"
}}
>
<div>
<img
style={{ width: "100%", height: "auto" }}
src={require("./the-mandalorian.jpg")}
alt="cat"
/>
</div>
<div style={{ height: "20px", background: "brown" }}></div>
</div>
</Allotment.Pane>
<Allotment.Pane>
<div style={{ height: "40px", background: "brown" }}></div>
<div
style={{
display: "flex",
height: "100%",
flexDirection: "column",
justifyContent: "space-between"
}}
>
<div>
<img
style={{ width: "100%", height: "auto" }}
src={require("./nature.jpg")}
alt="cat"
/>
</div>
<div style={{ height: "20px", background: "brown" }}></div>
</div>
</Allotment.Pane>
</Allotment>
</div>{" "}
</div>
</div>
</div>
);
}Comments
Comment posted by David Grosh
does the image or div have a width?
Comment posted by walee
@DavidGrosh you can try it with that link, image has width: “100%”,
Comment posted by walee
tried, but wont show it, you can also try it using that link
Comment posted by anderson.ea
Looks like it worked for me on the link, brown 20px box under the image?
Comment posted by walee
yes but between that and image should be justifyContent: “space-between”, cannot get space between that div and image
Comment posted by anderson.ea
how much space do you want? are you trying to set the second brown box at the bottom of screen?
Comment posted by walee
yes both brown boxes should be at the bottom of screen, that why there is space-between
Comment posted by walee
i get what you mean, but i want ‘justifyContent: “space-between”‘, to work between that div and image, that why i have that there
Comment posted by walee
i want both of those brown boxes at the bottom of screen, thats why there is justifyContent: “space-between”
Comment posted by Gass
Try the last code I’m sharing. it could be a helpful approach
Comment posted by walee
i got it working also with height:85%, but why height 85? shouldnt height 100 be enought, it takes the rest space available…can u do something that height:”100%” would work ?
Comment posted by Gass
85% because you are giving the brown HTML element 15%. it sums a total of 100% so it works..
Comment posted by walee
you are using height: “50vh”, but i want set brown box at the bottom of screen
Comment posted by Justin Meskan
You need to use 100vh, thats view height. this is will give you the viewable screen
Comment posted by walee
try it, it wont show the div then at bottom
Comment posted by Justin Meskan
Yes thats the point. there is no bottom or right unless you define it
Comment posted by Justin Meskan
you have to actually set a distance down the page